Material & light
Choose whether surfaces feel flat, raised, matte, polished, or glassy. A shared light source gives their reflection and depth a consistent direction.
Give each decision a job
| Recipe key | CSS property | What changes |
|---|---|---|
outer-depth | --ui-outer-depth | How strongly controls and floating surfaces rise above the page. |
inner-depth | --ui-inner-depth | Recession in fields and pressed controls. |
finish | --ui-finish | How strongly a surface catches a reflection, from matte to polished. Reflection also needs nonzero light strength. |
glassiness | --ui-glassiness | Frosting of the scene behind glass, primarily through decorative rims. |
surface-separation | --ui-surface-separation | The material offset around floating content, scaled by the popup's purpose and size. |
translucency | --ui-overlay-translucency | Transmission through decorative rims. At maximum, content plates also reveal a little of the scene. |
edge-light | --ui-edge-light | Light caught at the boundary, independently of depth. |
glow | --ui-glow | Reflected light beyond the surface, from a quiet halo to a stronger bloom. |
Depth changes elevation. Finish changes reflection. Transparency changes what shows through. You can change one while retaining the others: turning light strength to zero removes illumination while depth shadows remain.
Place the light
| Recipe key | CSS property | What changes | Recipe keys | CSS properties |
|---|---|---|---|---|
light-color | --ui-light-color | The reflected environment's color, independently of object pigment. | ||
Position relative to each surface. Coordinates run from 0 to 1; 0.5, 0 is top center. | light-x, light-y | --ui-light-x, --ui-light-y | ||
light-spread | --ui-light-spread | Concentrated illumination through a broader light source. | ||
light-strength | --ui-light-strength | Illumination intensity. Components and materials determine how they respond. |
In Customize → Material & light, drag the light source, use its arrow keys, or enter exact percentages. Shift moves faster; Home returns it to top center. Escape cancels a drag and restores its start.
Let components choose the treatment
<ui-card variant="elevated">A standard raised card</ui-card>
<ui-card variant="elevated" treatment="expressive">A raised card with the theme's material</ui-card>
<ui-card treatment="expressive">Material treatment on an outlined card</ui-card>variant chooses surface structure. treatment chooses how much decorative material it expresses. A matte theme stays matte even when a component requests expressive treatment. A card's tone changes its color while preserving its geometry.
The content plane stays nearly opaque so text remains readable. Reduced-transparency and forced-colors preferences suppress ornamental reflection and glow; reduced transparency also disables backdrop blur.