Dev utility

Glass Current Design Lab

Color mix

Mix Playground

Color spaceFirst variableSecond variableFirst percentage: 50%Second percentage: 50%Opacity: 100%Gradient angle: 135degFirst stop: 0%Second stop: 100%

50% + 50% = 100%

Mixed color preview

The preview background changes here only, so the global Starlight theme is untouched.

Generated color-mix CSSResolved computed color

Gradient

First colorSecond colorFirst stop: 0%Second stop: 100%Angle: 217deg

Gradient preview

Adjust stops and angle, then compare the same gradient over local dark and light contexts.

Generated linear-gradient CSS

Web Awesome

Button Content

LabelBackground modeShow icon

Button Color

Background color ABackground color BGradient angle: 217degBackground opacity: 100%Border colorLabel color

Interaction

Hover lift: 3pxShadow token

Icon

Icon nameIcon familyIcon variantPrimary colorSecondary colorPrimary opacity: 100%Secondary opacity: 45%

Main dark docs background with Athens Gray text.

Explore Interaction

Recessed dark surfaces, nav, and code-like panels.

Explore Interaction

Structural surface used for stronger separations.

Explore Interaction

Light docs background with Mirage and Rhino text.

Explore Interaction

Generated button CSS