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.

PropertyMap Example
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

PropertyTypeExample
displaystringflex
positionstringabsolute
topstring or SizeVariable100px
rightstring or SizeVariable0px
bottomstring or SizeVariable0
leftstring or SizeVariable50px
widthstring or SizeVariable50%
heightstring or SizeVariable100vh
min-widthstring or SizeVariable60px
max-widthstring or SizeVariable80%
min-heightstring or SizeVariable100px
max-heightstring or SizeVariable200px
z-indexstring10

Flex layout

PropertyTypeExample
flex-directionstringrow
flex-wrapstringwrap
flex-basisstring or SizeVariableauto
flex-growstring1
flex-shrinkstring1
justify-contentstringspace-between
align-itemsstringflex-start
align-contentstringcenter
align-selfstringstretch

Grid

PropertyTypeExample
grid-template-columnsstring50px 100px
grid-template-rowsstringauto
grid-template-areasstring'header header'
grid-column-startstring1
grid-column-endstringspan 2
grid-row-startstring1
grid-row-endstring3
grid-column-gapstring10px
grid-row-gapstring or SizeVariable20px
grid-auto-flowstringrow dense

Typography

PropertyTypeExample
font-familystring or FontFamilyVariableArial, sans-serif
font-sizestring or SizeVariable16px
font-weightstringbold
font-stylestringitalic
line-heightstring or SizeVariable1.5
text-alignstringjustify
text-transformstringuppercase
letter-spacingstring or SizeVariable0.5em
word-spacingstring or SizeVariable5px
colorstring or ColorVariable#FF9800

Colors & backgrounds

PropertyTypeExample
background-colorstring or ColorVariable#e0e0e0
background-imagestringurl('image.jpg')
background-sizestringcover
background-positionstringtop right
background-repeatstringrepeat-x
background-attachmentstringfixed
background-blend-modestringmultiply
accent-colorstring or ColorVariable#ff5733
caret-colorstring or ColorVariableblue

Borders

PropertyTypeExample
border-top-widthstring or SizeVariable2px
border-top-stylestringridge
border-top-colorstring or ColorVariable#3F51B5
border-top-left-radiusstring or SizeVariable20px
border-top-right-radiusstring or SizeVariable20px
border-bottom-widthstring or SizeVariable1px
border-bottom-stylestringgroove
border-bottom-colorstring or ColorVariable#f44336
border-bottom-left-radiusstring or SizeVariable4px
border-bottom-right-radiusstring or SizeVariable4px
border-left-widthstring or SizeVariable2px
border-left-stylestringdashed
border-left-colorstring or ColorVariable#9C27B0
border-right-widthstring or SizeVariable1px
border-right-stylestringdouble
border-right-colorstring or ColorVariable#FFEB3B

Spacing

PropertyTypeExample
margin-topstring or SizeVariable10px
margin-rightstring or SizeVariable30px
margin-bottomstring or SizeVariable20px
margin-leftstring or SizeVariable30px
padding-topstring or SizeVariable10px
padding-rightstring or SizeVariable10px
padding-bottomstring or SizeVariable15px
padding-leftstring or SizeVariable10px

Effects & transforms

PropertyTypeExample
box-shadowstring10px 5px 5px black
text-shadowstring2px 2px 5px grey
filterstringblur(2px)
backdrop-filterstringblur(5px)
transformstringrotate(45deg)
transform-originstringtop left
opacitystring0.5
mix-blend-modestringmultiply

Transitions & animations

PropertyTypeExample
transition-propertystringopacity
transition-durationstring300ms
transition-timing-functionstringease-in-out
transition-delaystring0.5s
animation-namestringslidein
animation-durationstring1s
animation-timing-functionstringease-in-out
animation-delaystring2s
animation-iteration-countstringinfinite
animation-directionstringalternate
animation-fill-modestringforwards
animation-play-statestringpaused

Complete property reference

For a comprehensive list of all supported properties, see the W3Schools CSS Properties reference.

Style PropertyValueExample
accent-colorstring or ColorVariable#ff5733
align-contentstringcenter
align-itemsstringflex-start
align-selfstringstretch
animation-delaystring2s
animation-directionstringalternate
animation-durationstring1s
animation-fill-modestringforwards
animation-iteration-countstringinfinite
animation-namestringslidein
animation-play-statestringpaused
animation-timing-functionstringease-in-out
appearancestringnone
backdrop-filterstringblur(5px)
backface-visibilitystringhidden
background-attachmentstringfixed
background-blend-modestringmultiply
background-clipstringborder-box
background-colorstring or ColorVariable#e0e0e0
background-imagestringurl('image.jpg')
background-originstringpadding-box
background-positionstringtop right
background-position-xstring or SizeVariable50%
background-position-ystring or SizeVariable50%
background-repeatstringrepeat-x
background-sizestringcover
block-sizestring or SizeVariable100px
border-block-end-colorstring or ColorVariable#000000
border-block-end-stylestringdotted
border-block-end-widthstring or SizeVariable3px
border-block-start-colorstring or ColorVariable#333333
border-block-start-stylestringsolid
border-block-start-widthstring or SizeVariable2px
border-bottom-colorstring or ColorVariable#f44336
border-bottom-left-radiusstring or SizeVariable4px
border-bottom-right-radiusstring or SizeVariable4px
border-bottom-stylestringgroove
border-bottom-widthstring or SizeVariable1px
border-collapsestringcollapse
border-end-end-radiusstring or SizeVariable10px
border-end-start-radiusstring or SizeVariable10px
border-image-outsetstring or SizeVariable5px
border-image-repeatstringstretch
border-image-slicestring30%
border-image-sourcestringurl('border.png')
border-image-widthstring or SizeVariable10px
border-inline-end-colorstring or ColorVariable#4CAF50
border-inline-end-stylestringinset
border-inline-end-widthstring or SizeVariable4px
border-inline-start-colorstring or ColorVariable#2196F3
border-inline-start-stylestringoutset
border-inline-start-widthstring or SizeVariable3px
border-left-colorstring or ColorVariable#9C27B0
border-left-stylestringdashed
border-left-widthstring or SizeVariable2px
border-right-colorstring or ColorVariable#FFEB3B
border-right-stylestringdouble
border-right-widthstring or SizeVariable1px
border-start-end-radiusstring or SizeVariable5px
border-start-start-radiusstring or SizeVariable5px
border-top-colorstring or ColorVariable#3F51B5
border-top-left-radiusstring or SizeVariable20px
border-top-right-radiusstring or SizeVariable20px
border-top-stylestringridge
border-top-widthstring or SizeVariable2px
bottomstring or SizeVariable0
box-shadowstring10px 5px 5px black
box-sizingstringborder-box
break-afterstringauto
break-beforestringalways
break-insidestringavoid
caption-sidestringbottom
caret-colorstring or ColorVariableblue
clearstringboth
clipstringrect(0,0,0,0)
clip-pathstringcircle(50%)
clip-rulestringevenodd
colorstring or ColorVariable#FF9800
color-interpolationstringsRGB
color-interpolation-filtersstringlinearRGB
column-countstring3
column-gapstring or SizeVariable20px
column-rule-colorstring or ColorVariable#607D8B
column-rule-stylestringsolid
column-rule-widthstring or SizeVariable1px
column-spanstringall
column-widthstring or SizeVariable200px
contentstring'Hello'
cursorstringpointer
cxstring50
cystring50
directionstringltr
displaystringflex
dominant-baselinestringalphabetic
empty-cellsstringshow
fillstring#f00
fill-opacitystring0.5
fill-rulestringnonzero
filterstringblur(2px)
flex-basisstring or SizeVariableauto
flex-directionstringrow
flex-growstring1
flex-shrinkstring1
flex-wrapstringwrap
floatstringright
flood-colorstring or ColorVariable#00BCD4
flood-opacitystring0.7
font-familystring or FontFamilyVariableArial, sans-serif
font-kerningstringnormal
font-optical-sizingstringauto
font-sizestring or SizeVariable16px
font-stretchstringcondensed
font-stylestringitalic
font-variant-alternatesstringnormal
font-variant-capsstringsmall-caps
font-variant-east-asianstringnormal
font-variant-ligaturesstringnone
font-variant-numericstringordinal
font-weightstringbold
grid-auto-columnsstringminmax(100px, auto)
grid-auto-flowstringrow dense
grid-auto-rowsstringauto
grid-column-endstringspan 2
grid-column-gapstring10px
grid-column-startstring1
grid-row-endstring3
grid-row-gapstring or SizeVariable20px
grid-row-startstring1
grid-template-areasstring'header header'
grid-template-columnsstring50px 100px
grid-template-rowsstringauto
heightstring or SizeVariable100vh
image-orientationstring90deg
image-renderingstringauto
inline-sizestring or SizeVariable200px
inset-block-endstring or SizeVariable20px
inset-block-startstring or SizeVariable5px
inset-inline-endstring or SizeVariable10px
inset-inline-startstring or SizeVariable10px
isolationstringisolate
justify-contentstringspace-between
justify-itemsstringstretch
justify-selfstringcenter
leftstring or SizeVariable50px
letter-spacingstring or SizeVariable0.5em
lighting-colorstring or ColorVariablewhite
line-breakstringstrict
line-heightstring or SizeVariable1.5
list-style-imagestringurl('star.png')
list-style-positionstringinside
list-style-typestringdisc
margin-block-endstring or SizeVariable15px
margin-block-startstring or SizeVariable15px
margin-bottomstring or SizeVariable20px
margin-inline-endstring or SizeVariable10px
margin-inline-startstring or SizeVariable10px
margin-leftstring or SizeVariable30px
margin-rightstring or SizeVariable30px
margin-topstring or SizeVariable10px
marker-endstringurl('arrowhead.svg')
marker-midstringurl('dot.svg')
marker-startstringurl('circle.svg')
mask-typestringluminance
max-block-sizestring or SizeVariable100px
max-heightstring or SizeVariable200px
max-inline-sizestring or SizeVariable300px
max-widthstring or SizeVariable80%
min-block-sizestring or SizeVariable50px
min-heightstring or SizeVariable100px
min-inline-sizestring or SizeVariable150px
min-widthstring or SizeVariable60px
mix-blend-modestringmultiply
object-fitstringcover
object-positionstringcenter top
offset-anchorstringauto
offset-distancestring or SizeVariable10px
offset-pathstringpath('M10 80 Q 95 10 180 80')
offset-rotatestringauto
opacitystring0.5
orderstring2
outline-colorstring or ColorVariable#FF5722
outline-offsetstring or SizeVariable2px
outline-stylestringdashed
outline-widthstring or SizeVariable3px
overflow-wrapstringbreak-word
overflow-xstringauto
overflow-ystringscroll
overscroll-behavior-blockstringcontain
overscroll-behavior-inlinestringnone
padding-block-endstring or SizeVariable25px
padding-block-startstring or SizeVariable25px
padding-bottomstring or SizeVariable15px
padding-inline-endstring or SizeVariable20px
padding-inline-startstring or SizeVariable20px
padding-leftstring or SizeVariable10px
padding-rightstring or SizeVariable10px
padding-topstring or SizeVariable10px
paint-orderstringfill stroke markers
perspectivestring or SizeVariable500px
perspective-originstring50% 50%
pointer-eventsstringnone
positionstringabsolute
rstring or SizeVariable50px
resizestringboth
rightstring or SizeVariable0px
rotatestring45deg
row-gapstring or SizeVariable20px
rxstring or SizeVariable10px
rystring or SizeVariable10px
scalestring1.2
scroll-behaviorstringsmooth
scroll-margin-block-endstring or SizeVariable10px
scroll-margin-block-startstring or SizeVariable10px
scroll-margin-inline-endstring or SizeVariable10px
scroll-margin-inline-startstring or SizeVariable10px
scroll-padding-block-endstring or SizeVariable20px
scroll-padding-block-startstring or SizeVariable20px
scroll-padding-inline-endstring or SizeVariable20px
scroll-padding-inline-startstring or SizeVariable20px
shape-image-thresholdstring0.3
shape-marginstring or SizeVariable15px
shape-outsidestringcircle(50%)
shape-renderingstringauto
stop-colorstring or ColorVariable#0D47A1
stop-opacitystring0.8
strokestring or ColorVariableblack
stroke-dasharraystring5, 10
stroke-dashoffsetstring or SizeVariable5px
stroke-linecapstringround
stroke-linejoinstringbevel
stroke-miterlimitstring10
stroke-opacitystring1
stroke-widthstring or SizeVariable3px
tab-sizestring or SizeVariable4
table-layoutstringfixed
text-alignstringjustify
text-align-laststringcenter
text-anchorstringstart
text-decorationstringunderline
text-decoration-colorstring or ColorVariablered
text-decoration-linestringoverline
text-decoration-skip-inkstringauto
text-decoration-stylestringdotted
text-emphasis-colorstring or ColorVariablegreen
text-emphasis-positionstringunder right
text-emphasis-stylestringfilled circle
text-indentstring or SizeVariable20px
text-overflowstringellipsis
text-renderingstringoptimizeLegibility
text-shadowstring2px 2px 5px grey
text-transformstringuppercase
text-underline-positionstringunder
topstring or SizeVariable100px
touch-actionstringpan-right
transformstringrotate(45deg)
transform-originstringtop left
transform-stylestringpreserve-3d
transition-delaystring0.5s
transition-durationstring300ms
transition-propertystringopacity
transition-timing-functionstringease-in-out
translatestring or SizeVariable10px, 20px
unicode-bidistringbidi-override
vector-effectstringnon-scaling-stroke
vertical-alignstringmiddle
visibilitystringhidden
white-spacestringnowrap
widthstring or SizeVariable50%
will-changestringtransform
word-breakstringbreak-word
word-spacingstring or SizeVariable5px
writing-modestringvertical-rl
xstring or SizeVariable5px
ystring or SizeVariable10px
z-indexstring10
-webkit-line-clampstring3
-webkit-text-fill-colorstring or ColorVariable#FF5722
-webkit-text-stroke-colorstring or ColorVariable#4CAF50
-webkit-text-stroke-widthstring or SizeVariable1px