Style Properties

Style properties are CSS properties used to define the look and layout of web page elements. In the Webflow Designer, these properties are applied to classes, impacting various design aspects such as layout, color, and font.

The Designer API allows developers to programmatically set and adjust these CSS style properties and apply them to the Styles object, providing a new level of automation and customization for app users that enhances their design experience in Webflow.

📘
Property Names
Please use the long-form alias of a css property when managing styles. For example, the property row-gap has a long-form alias of grid-row-gap which you can find in the MDN CSS Properties reference.

Refer to the index below for a comprehensive list of CSS Style Properties and their corresponding values. See this full list of CSS Properties for an in-depth explanation of the property and its usage.

Style Property	Value	Example
accent-color	string or ColorVariable	`#ff5733`
align-content	string	`center`
align-items	string	`flex-start`
align-self	string	`stretch`
animation-delay	string	`2s`
animation-direction	string	`alternate`
animation-duration	string	`1s`
animation-fill-mode	string	`forwards`
animation-iteration-count	string	`infinite`
animation-name	string	`slidein`
animation-play-state	string	`paused`
animation-timing-function	string	`ease-in-out`
appearance	string	`none`
backdrop-filter	string	`blur(5px)`
backface-visibility	string	`hidden`
background-attachment	string	`fixed`
background-blend-mode	string	`multiply`
background-clip	string	`border-box`
background-color	string or ColorVariable	`#e0e0e0`
background-image	string	`url('image.jpg')`
background-origin	string	`padding-box`
background-position	string	`top right`
background-position-x	string or SizeVariable	`50%`
background-position-y	string or SizeVariable	`50%`
background-repeat	string	`repeat-x`
background-size	string	`cover`
block-size	string or SizeVariable	`100px`
border-block-end-color	string or ColorVariable	`#000000`
border-block-end-style	string	`dotted`
border-block-end-width	string or SizeVariable	`3px`
border-block-start-color	string or ColorVariable	`#333333`
border-block-start-style	string	`solid`
border-block-start-width	string or SizeVariable	`2px`
border-bottom-color	string or ColorVariable	`#f44336`
border-bottom-left-radius	string or SizeVariable	`4px`
border-bottom-right-radius	string or SizeVariable	`4px`
border-bottom-style	string	`groove`
border-bottom-width	string or SizeVariable	`1px`
border-collapse	string	`collapse`
border-end-end-radius	string or SizeVariable	`10px`
border-end-start-radius	string or SizeVariable	`10px`
border-image-outset	string or SizeVariable	`5px`
border-image-repeat	string	`stretch`
border-image-slice	string	`30%`
border-image-source	string	`url('border.png')`
border-image-width	string or SizeVariable	`10px`
border-inline-end-color	string or ColorVariable	`#4CAF50`
border-inline-end-style	string	`inset`
border-inline-end-width	string or SizeVariable	`4px`
border-inline-start-color	string or ColorVariable	`#2196F3`
border-inline-start-style	string	`outset`
border-inline-start-width	string or SizeVariable	`3px`
border-left-color	string or ColorVariable	`#9C27B0`
border-left-style	string	`dashed`
border-left-width	string or SizeVariable	`2px`
border-right-color	string or ColorVariable	`#FFEB3B`
border-right-style	string	`double`
border-right-width	string or SizeVariable	`1px`
border-start-end-radius	string or SizeVariable	`5px`
border-start-start-radius	string or SizeVariable	`5px`
border-top-color	string or ColorVariable	`#3F51B5`
border-top-left-radius	string or SizeVariable	`20px`
border-top-right-radius	string or SizeVariable	`20px`
border-top-style	string	`ridge`
border-top-width	string or SizeVariable	`2px`
bottom	string or SizeVariable	`0`
box-shadow	string	`10px 5px 5px black`
box-sizing	string	`border-box`
break-after	string	`auto`
break-before	string	`always`
break-inside	string	`avoid`
caption-side	string	`bottom`
caret-color	string or ColorVariable	`blue`
clear	string	`both`
clip	string	`rect(0,0,0,0)`
clip-path	string	`circle(50%)`
clip-rule	string	`evenodd`
color	string or ColorVariable	`#FF9800`
color-interpolation	string	`sRGB`
color-interpolation-filters	string	`linearRGB`
column-count	string	`3`
column-gap	string or SizeVariable	`20px`
column-rule-color	string or ColorVariable	`#607D8B`
column-rule-style	string	`solid`
column-rule-width	string or SizeVariable	`1px`
column-span	string	`all`
column-width	string or SizeVariable	`200px`
content	string	`'Hello'`
cursor	string	`pointer`
cx	string	`50`
cy	string	`50`
direction	string	`ltr`
display	string	`flex`
dominant-baseline	string	`alphabetic`
empty-cells	string	`show`
fill	string	`#f00`
fill-opacity	string	`0.5`
fill-rule	string	`nonzero`
filter	string	`blur(2px)`
flex-basis	string or SizeVariable	`auto`
flex-direction	string	`row`
flex-grow	string	`1`
flex-shrink	string	`1`
flex-wrap	string	`wrap`
float	string	`right`
flood-color	string or ColorVariable	`#00BCD4`
flood-opacity	string	`0.7`
font-family	string or FontFamilyVariable	`Arial, sans-serif`
font-kerning	string	`normal`
font-optical-sizing	string	`auto`
font-size	string or SizeVariable	`16px`
font-stretch	string	`condensed`
font-style	string	`italic`
font-variant-alternates	string	`normal`
font-variant-caps	string	`small-caps`
font-variant-east-asian	string	`normal`
font-variant-ligatures	string	`none`
font-variant-numeric	string	`ordinal`
font-weight	string	`bold`
grid-auto-columns	string	`minmax(100px, auto)`
grid-auto-flow	string	`row dense`
grid-auto-rows	string	`auto`
grid-column-end	string	`span 2`
grid-column-gap	string	`10px`
grid-column-start	string	`1`
grid-row-end	string	`3`
grid-row-gap	string or SizeVariable	`20px`
grid-row-start	string	`1`
grid-template-areas	string	`'header header'`
grid-template-columns	string	`50px 100px`
grid-template-rows	string	`auto`
height	string or SizeVariable	`100vh`
image-orientation	string	`90deg`
image-rendering	string	`auto`
inline-size	string or SizeVariable	`200px`
inset-block-end	string or SizeVariable	`20px`
inset-block-start	string or SizeVariable	`5px`
inset-inline-end	string or SizeVariable	`10px`
inset-inline-start	string or SizeVariable	`10px`
isolation	string	`isolate`
justify-content	string	`space-between`
justify-items	string	`stretch`
justify-self	string	`center`
left	string or SizeVariable	`50px`
letter-spacing	string or SizeVariable	`0.5em`
lighting-color	string or ColorVariable	`white`
line-break	string	`strict`
line-height	string or SizeVariable	`1.5`
list-style-image	string	`url('star.png')`
list-style-position	string	`inside`
list-style-type	string	`disc`
margin-block-end	string or SizeVariable	`15px`
margin-block-start	string or SizeVariable	`15px`
margin-bottom	string or SizeVariable	`20px`
margin-inline-end	string or SizeVariable	`10px`
margin-inline-start	string or SizeVariable	`10px`
margin-left	string or SizeVariable	`30px`
margin-right	string or SizeVariable	`30px`
margin-top	string or SizeVariable	`10px`
marker-end	string	`url('arrowhead.svg')`
marker-mid	string	`url('dot.svg')`
marker-start	string	`url('circle.svg')`
mask-type	string	`luminance`
max-block-size	string or SizeVariable	`100px`
max-height	string or SizeVariable	`200px`
max-inline-size	string or SizeVariable	`300px`
max-width	string or SizeVariable	`80%`
min-block-size	string or SizeVariable	`50px`
min-height	string or SizeVariable	`100px`
min-inline-size	string or SizeVariable	`150px`
min-width	string or SizeVariable	`60px`
mix-blend-mode	string	`multiply`
object-fit	string	`cover`
object-position	string	`center top`
offset-anchor	string	`auto`
offset-distance	string or SizeVariable	`10px`
offset-path	string	`path('M10 80 Q 95 10 180 80')`
offset-rotate	string	`auto`
opacity	string	`0.5`
order	string	`2`
outline-color	string or ColorVariable	`#FF5722`
outline-offset	string or SizeVariable	`2px`
outline-style	string	`dashed`
outline-width	string or SizeVariable	`3px`
overflow-wrap	string	`break-word`
overflow-x	string	`auto`
overflow-y	string	`scroll`
overscroll-behavior-block	string	`contain`
overscroll-behavior-inline	string	`none`
padding-block-end	string or SizeVariable	`25px`
padding-block-start	string or SizeVariable	`25px`
padding-bottom	string or SizeVariable	`15px`
padding-inline-end	string or SizeVariable	`20px`
padding-inline-start	string or SizeVariable	`20px`
padding-left	string or SizeVariable	`10px`
padding-right	string or SizeVariable	`10px`
padding-top	string or SizeVariable	`10px`
paint-order	string	`fill stroke markers`
perspective	string or SizeVariable	`500px`
perspective-origin	string	`50% 50%`
pointer-events	string	`none`
position	string	`absolute`
r	string or SizeVariable	`50px`
resize	string	`both`
right	string or SizeVariable	`0px`
rotate	string	`45deg`
row-gap	string or SizeVariable	`20px`
rx	string or SizeVariable	`10px`
ry	string or SizeVariable	`10px`
scale	string	`1.2`
scroll-behavior	string	`smooth`
scroll-margin-block-end	string or SizeVariable	`10px`
scroll-margin-block-start	string or SizeVariable	`10px`
scroll-margin-inline-end	string or SizeVariable	`10px`
scroll-margin-inline-start	string or SizeVariable	`10px`
scroll-padding-block-end	string or SizeVariable	`20px`
scroll-padding-block-start	string or SizeVariable	`20px`
scroll-padding-inline-end	string or SizeVariable	`20px`
scroll-padding-inline-start	string or SizeVariable	`20px`
shape-image-threshold	string	`0.3`
shape-margin	string or SizeVariable	`15px`
shape-outside	string	`circle(50%)`
shape-rendering	string	`auto`
stop-color	string or ColorVariable	`#0D47A1`
stop-opacity	string	`0.8`
stroke	string or ColorVariable	`black`
stroke-dasharray	string	`5, 10`
stroke-dashoffset	string or SizeVariable	`5px`
stroke-linecap	string	`round`
stroke-linejoin	string	`bevel`
stroke-miterlimit	string	`10`
stroke-opacity	string	`1`
stroke-width	string or SizeVariable	`3px`
tab-size	string or SizeVariable	`4`
table-layout	string	`fixed`
text-align	string	`justify`
text-align-last	string	`center`
text-anchor	string	`start`
text-decoration	string	`underline`
text-decoration-color	string or ColorVariable	`red`
text-decoration-line	string	`overline`
text-decoration-skip-ink	string	`auto`
text-decoration-style	string	`dotted`
text-emphasis-color	string or ColorVariable	`green`
text-emphasis-position	string	`under right`
text-emphasis-style	string	`filled circle`
text-indent	string or SizeVariable	`20px`
text-overflow	string	`ellipsis`
text-rendering	string	`optimizeLegibility`
text-shadow	string	`2px 2px 5px grey`
text-transform	string	`uppercase`
text-underline-position	string	`under`
top	string or SizeVariable	`100px`
touch-action	string	`pan-right`
transform	string	`rotate(45deg)`
transform-origin	string	`top left`
transform-style	string	`preserve-3d`
transition-delay	string	`0.5s`
transition-duration	string	`300ms`
transition-property	string	`opacity`
transition-timing-function	string	`ease-in-out`
translate	string or SizeVariable	`10px, 20px`
unicode-bidi	string	`bidi-override`
vector-effect	string	`non-scaling-stroke`
vertical-align	string	`middle`
visibility	string	`hidden`
white-space	string	`nowrap`
width	string or SizeVariable	`50%`
will-change	string	`transform`
word-break	string	`break-word`
word-spacing	string or SizeVariable	`5px`
writing-mode	string	`vertical-rl`
x	string or SizeVariable	`5px`
y	string or SizeVariable	`10px`
z-index	string	`10`
-webkit-line-clamp	string	`3`
-webkit-text-fill-color	string or ColorVariable	`#FF5722`
-webkit-text-stroke-color	string or ColorVariable	`#4CAF50`
-webkit-text-stroke-width	string or SizeVariable	`1px`

📘Property Names

📘
Property Names