CSS — Visual

← Back to index · ← Supported CSS

Box decoration and effects. The cascade-resolved style feeds BoxToPaintConverter (Runtime/Paint/Conversion/), which emits a flat PaintCommand list; the render backend rasterizes it. Effects that need an offscreen surface (filter, backdrop-filter, masks) run as shader passes in the URP backend.

Backgrounds

• background-color.
• background-image: url(...), linear-gradient(...), radial-gradient(...), conic-gradient(...).
• background-size, background-position, background-repeat, background-clip (including background-clip: text for gradient text — see Text & Fonts).
• Gradient color interpolation defaults to sRGB (the spec default is oklab); pass in oklab explicitly if you need oklab mid-stops.

Known gap (GTILE-1): background-position / background-size are honored for image layers but currently ignored on gradient layers — a gradient fills the whole box regardless of its tile.

Borders

border-* longhands and shorthand. border-style: solid, dashed, dotted, none (other styles map to solid with a warning). Per-corner border-radius, including the elliptical slash form. border-image with sprite-border-derived slices (9-slice) is supported.

Effects

• opacity.
• box-shadow with spread and inset. (Heavy multi-shadow boxes are among the most expensive painters.)
• transform: translate(x,y), translateX/Y, scale(s), scale(sx,sy), rotate(deg), skew(...), matrix(...), plus the translate/rotate/ scale longhands and transform-origin. 3D-transform properties (perspective, transform-style, backface-visibility) cascade but have no visible effect — there is no 3D paint path.
• filter: blur(), brightness(), contrast(), grayscale(), opacity(), saturate(), hue-rotate(), invert(), sepia(), drop-shadow(). SVG url(#id) filter references are parsed and skipped.
• backdrop-filter: blurs/adjusts the content behind the element. The backdrop copy is refreshed from the current color target before each composite so it includes earlier-painted UI in the same frame.
• clip-path: basic shapes — inset(), circle(), ellipse(), polygon() (with nonzero/evenodd). Missing: path(), shape(), xywh(), url(#…).
• mask / mask layers: solid and gradient masks composite correctly (alpha/luminance). URL-sourced masks resolve geometry but the software path doesn't sample source pixels; the URP path uploads the first 4 mask layers.

Color & compositing notes

• All color math runs in linear space (the project color space). color, gradients, and interpolation use the proper IEC 61966-2-1 sRGB curve.
• mix-blend-mode values other than normal register and create stacking contexts, but the URP pipeline composites every value as normal. Use baked textures or per-element opacity for blending.
• A documented GPU-side gap (CHIP-LOWALPHA): sub-~10% alpha fills on rounded-corner rects can fail to register visibly. Use ≥10% alpha for visible tints.

Next: CSS Text · Text & Fonts · Rendering