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 |