Style Properties
Style properties define the visual appearance and layout of web page elements. Using the Webflow Designer API, you can programmatically set these CSS properties to control design aspects like colors, typography, spacing, and positioning.
How to use style properties
The Designer API accepts style properties as a PropertyMap
object. A PropertyMap
is a key-value collection where keys are CSS property names and values are their corresponding settings.
1 { 2 "color": "#ff5733", 3 "font-size": "16px", 4 "font-weight": "bold", 5 "text-align": "center", 6 "background-color": "#e0e0e0", 7 "border-radius": "5px", 8 "border-color": "#000000", 9 }
Property naming
Use the long-form CSS property names when setting styles. For example, use grid-row-gap
instead of row-gap
. See the MDN CSS Properties reference for complete property names.
Supported properties
The following properties are organized by functional category for reference. Each property accepts either a string value or, where noted, a Webflow variable reference.
Layout & positioning
Property | Type | Example |
---|---|---|
display | string | flex |
position | string | absolute |
top | string or SizeVariable | 100px |
right | string or SizeVariable | 0px |
bottom | string or SizeVariable | 0 |
left | string or SizeVariable | 50px |
width | string or SizeVariable | 50% |
height | string or SizeVariable | 100vh |
min-width | string or SizeVariable | 60px |
max-width | string or SizeVariable | 80% |
min-height | string or SizeVariable | 100px |
max-height | string or SizeVariable | 200px |
z-index | string | 10 |
Flex layout
Property | Type | Example |
---|---|---|
flex-direction | string | row |
flex-wrap | string | wrap |
flex-basis | string or SizeVariable | auto |
flex-grow | string | 1 |
flex-shrink | string | 1 |
justify-content | string | space-between |
align-items | string | flex-start |
align-content | string | center |
align-self | string | stretch |
Grid
Property | Type | Example |
---|---|---|
grid-template-columns | string | 50px 100px |
grid-template-rows | string | auto |
grid-template-areas | string | 'header header' |
grid-column-start | string | 1 |
grid-column-end | string | span 2 |
grid-row-start | string | 1 |
grid-row-end | string | 3 |
grid-column-gap | string | 10px |
grid-row-gap | string or SizeVariable | 20px |
grid-auto-flow | string | row dense |
Typography
Property | Type | Example |
---|---|---|
font-family | string or FontFamilyVariable | Arial, sans-serif |
font-size | string or SizeVariable | 16px |
font-weight | string | bold |
font-style | string | italic |
line-height | string or SizeVariable | 1.5 |
text-align | string | justify |
text-transform | string | uppercase |
letter-spacing | string or SizeVariable | 0.5em |
word-spacing | string or SizeVariable | 5px |
color | string or ColorVariable | #FF9800 |
Colors & backgrounds
Property | Type | Example |
---|---|---|
background-color | string or ColorVariable | #e0e0e0 |
background-image | string | url('image.jpg') |
background-size | string | cover |
background-position | string | top right |
background-repeat | string | repeat-x |
background-attachment | string | fixed |
background-blend-mode | string | multiply |
accent-color | string or ColorVariable | #ff5733 |
caret-color | string or ColorVariable | blue |
Borders
Property | Type | Example |
---|---|---|
border-top-width | string or SizeVariable | 2px |
border-top-style | string | ridge |
border-top-color | string or ColorVariable | #3F51B5 |
border-top-left-radius | string or SizeVariable | 20px |
border-top-right-radius | string or SizeVariable | 20px |
border-bottom-width | string or SizeVariable | 1px |
border-bottom-style | string | groove |
border-bottom-color | string or ColorVariable | #f44336 |
border-bottom-left-radius | string or SizeVariable | 4px |
border-bottom-right-radius | string or SizeVariable | 4px |
border-left-width | string or SizeVariable | 2px |
border-left-style | string | dashed |
border-left-color | string or ColorVariable | #9C27B0 |
border-right-width | string or SizeVariable | 1px |
border-right-style | string | double |
border-right-color | string or ColorVariable | #FFEB3B |
Spacing
Property | Type | Example |
---|---|---|
margin-top | string or SizeVariable | 10px |
margin-right | string or SizeVariable | 30px |
margin-bottom | string or SizeVariable | 20px |
margin-left | string or SizeVariable | 30px |
padding-top | string or SizeVariable | 10px |
padding-right | string or SizeVariable | 10px |
padding-bottom | string or SizeVariable | 15px |
padding-left | string or SizeVariable | 10px |
Effects & transforms
Property | Type | Example |
---|---|---|
box-shadow | string | 10px 5px 5px black |
text-shadow | string | 2px 2px 5px grey |
filter | string | blur(2px) |
backdrop-filter | string | blur(5px) |
transform | string | rotate(45deg) |
transform-origin | string | top left |
opacity | string | 0.5 |
mix-blend-mode | string | multiply |
Transitions & animations
Property | Type | Example |
---|---|---|
transition-property | string | opacity |
transition-duration | string | 300ms |
transition-timing-function | string | ease-in-out |
transition-delay | string | 0.5s |
animation-name | string | slidein |
animation-duration | string | 1s |
animation-timing-function | string | ease-in-out |
animation-delay | string | 2s |
animation-iteration-count | string | infinite |
animation-direction | string | alternate |
animation-fill-mode | string | forwards |
animation-play-state | string | paused |
Complete property reference
For a comprehensive list of all supported properties, see the W3Schools CSS Properties reference.
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 |