S&box Wiki

Supported Style Properties

We try to keep as close to standard web styles as possible - but not every property is implemented. We'll use this page to highlight any differences.

Anything marked in bold may behave differently to how you expect it.

Common Types

Name Description / Notes Examples
float A standard float flex-grow: 10
Color Can have alpha. color: #fff, color: #ffffffaa, color: rgba( red, 0.5 )
Length A dimension, pixel or relative. left: 10px, left: 10%

Supported Properties

Name Parameters Examples / Notes
align-content auto / flex-end / flex-start / center / stretch / space-between / space-around / baseline / stretch
align-items as above
align-self as above
backdrop-filter blur(Length) / saturate(Length) / contrast(Length) / brightness(Length) / grayscale(Length) / sepia(Length) backdrop-filter: blur(10px) saturate(80%)
background Fills in the properties below
background-color Color
background-image url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color)
background-position Length, Length (optional) background-position: 10px, background-position: 10px 15px
background-repeat no-repeat / repeat-x / repeat-y / repeat
background-size Length, Length (optional) background-size: 10px, background-size: 10px 15px
border [ border-width border-style border-color ] border: 10px solid white
border-bottom Same as border
border-bottom-color Color
border-bottom-left-radius Length
border-bottom-right-radius Length
border-bottom-width Length
border-color Color
border-left Same as border
border-left-color Color
border-left-width Length
border-radius Length border-radius: 10px, border-radius: 10px 0px 10px 10px
border-right Same as border
border-right-color Color
border-right-width Length
border-top Same as border
border-top-color Color
border-top-width Length
border-width Length
bottom Length
box-shadow Length, Length (optional), Length (blur, optional), Length (spread, optional), Color
color Color / linear-gradient(Color, Color) / radial-gradient(Color, Color)
cursor none / pointer / progress / wait / crosshair / text / move / not-allowed
display flex (default) / none Everything is flex by default.
filter blur(Length) / saturate(Length) / contrast(Length) / brightness(Length) / grayscale(Length) / sepia(Length) / border-wrap(Length, Color) filter: blur(20px)
flex-basis Length
flex-direction column / column-reverse / row-reverse / row
flex-grow float
flex-shrink float
flex-wrap wrap / wrap-reverse / nowrap
font-color Color
font-family string Specify a single font, based on the filename, see Fonts.
font-size Length
font-style normal / italic
font-weight normal / bold / lighter / bolder / int font-weight: normal, font-weight: 300
gap Length, Length (optional) shorthand for row-gap and column-gap, specifies the size of gutters
height Length
image-rendering auto / anisotropic / bilinear / trilinear / point / pixelated / nearest-neighbour
justify-content center / flex-end / flex-start / space-between / space-around / space-evenly
left Length
letter-spacing Length / normal
mask Shorthand for other mask properties
mask-image url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color)
mask-mode luminance / alpha
mask-repeat repeat-x / repeat-y / repeat / no-repeat
mask-size Length, Length (optional)
mask-position Length, Length (optional)
margin Fills in the properties below
margin-bottom Length
margin-left Length
margin-right Length
margin-top Length
max-height Length
max-width Length
min-height Length
min-width Length
mix-blend-mode normal / lighten / multiply
opacity Float
order Integer
overflow hidden / scroll / visible
padding Fills in the properties below
padding-bottom Length
padding-left Length
padding-right Length
padding-top Length
pointer-events none / all / auto
position static (default) / relative / absolute See how it works: https://yogalayout.com/docs/absolute-relative-layout/
right Length
text-align center / left / right
text-decoration Color / Length / LineStyle, Line Properties can be in any order and you can have multiple lines
text-decoration-color Color Color of the line decoration
text-decoration-line underline/line-through/overline Multiple properties can be set, text-decoration-line: overline underline;
text-decoration-skip-ink all/none Decides whether the line decoration should draw above glyphs or not
text-decoration-style solid/double/dotted/dashed/wavy Line decoration style
text-decoration-thickness Length Thickness of the decoration line
text-decoration-line-through-offset Length How much the line-through decoration is offset
text-decoration-overline-offset Length How much the overline decoration is offset
text-decoration-underline-offset Length How much the underline decoration is offset
text-shadow Length, Length (optional), Length (blur, optional), Length (spread, optional), Color
text-transform none / capitalize / lowercase / uppercase
text-overflow ellipsis / clip
word-break normal / break-all
line-height Length
top Length
transform Fills in the properties below
transform-origin x-position / y-position / z-position
transform-origin-x Length
transform-origin-y Length
transition Fills in the properties below
transition-delay float
transition-duration float
transition-property string
transition-timing-function linear / ease / ease-in-out / ease-out / ease-in / bounce-in / bounce-out / bounce-in-out
white-space normal / nowrap
width Length
z-index int

Useful Resources