Backgrounds and Gradients

Solid color

.panel {
  background-color: rgba(16, 29, 43, 0.9);
}

background-color fills the element. The last rgba() value controls transparency: 0 is fully clear, 1 is fully opaque. background-color: transparent removes the fill entirely, which is useful for a hit-testable element that should stay invisible.

For a shared color, create a named value in Themes and use it with var(--color-primary). See CSS variables.

Linear and radial gradients

.glossy-button {
  background-image: linear-gradient(
    180deg,
    #fffdf5 0%,
    #ffe5ad 42%,
    #d89b35 100%
  );
}

linear-gradient() accepts an angle (180deg) or a side (to bottom) followed by two to eight color stops. Stops may use explicit percentages, or omit positions to distribute evenly. radial-gradient() uses the same stop syntax with a circle/ellipse and an optional at <position> prelude in place of the angle.

Up to eight comma-separated gradient (or image) layers are supported per background/background-image declaration.

Conic gradients

conic-gradient() sweeps its stops around a center point instead of across a line, which makes it the natural fill for a pie or ring indicator:

.hold-ring {
  background: conic-gradient(from 0deg, #ffd700 0 var(--p), transparent var(--p) 100%);
}

--p here is an inline custom property the element's style attribute sets to the current percentage (for example style="--p: 63%"), updated as the player holds the input. The gradient itself stays static CSS; only the custom property's value changes, which keeps the update patchable instead of triggering a full document reload. See Reload cost.

conic-gradient() takes an optional prelude before its stop list:

• from <angle> sets the sweep's start angle. 0deg (the default when omitted) points up; the sweep runs clockwise. Degrees and turn are both accepted.
• at <x> <y> moves the center point, as a percentage or fraction of the element's box. Omit it to center the gradient on the element.

Combine both as conic-gradient(from -90deg at 50% 50%, ...). Either part may appear alone, or both together; the order shown here is required.

Conic gradients take the same two-to-eight-stop range and eight-layer limit as linear and radial gradients.

Stop interpolation through transparency

A gradient stop's color is interpolated in premultiplied alpha, so a ramp through a transparent stop fades out cleanly instead of passing through a muddy, partially opaque version of the color:

background: linear-gradient(180deg, #ffffff66, transparent);

red -> transparent fades red to nothing; it no longer darkens on the way there. This applies to every gradient (linear, radial, and conic) compiled against the current CSS Profile; it is not a separate declaration to opt into.

What is outside the profile

repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() are rejected. A repeating fill needs a tiled image asset instead. Color hints (a bare offset between two stops without a color) are not supported; give every stop its own color.

See CSS reference for the exact stop and layer counts alongside every other property's limits, and Effects for shadows and color filters.