Design & Color tools

Design layered box shadows visually and copy production-ready CSS.

Create linear, radial and conic gradients with multiple colour stops.

Control each corner independently and preview organic shapes and pills.

Convert between HEX, RGB, HSL and HSV with live swatches and contrast hints.

Measure text contrast ratios and check AA/AAA compliance for normal and large text.

Convert pixels to rem and back with a configurable root font size.

Build flexbox layouts visually and copy the CSS.

Create responsive CSS grid columns, rows and gaps visually.

Create CSS triangles in any direction with the border trick.

Create frosted-glass cards with blur, tint, border and shadow.

Style scrollbars with WebKit and Firefox CSS properties.

Create a fade-and-slide keyframe animation with configurable timing.

Create clamp() font sizes that scale smoothly between viewports.

Combine blur, brightness, contrast, saturation and hue filters visually.

Generate complementary, analogous, triadic and tetradic palettes from a base colour.

Create five tints and five shades from any base colour.

Generate smooth SVG wave paths for section dividers and backgrounds.

Preview heading and body font pairings using system fonts.

Copy ready-made system font stacks for UI and prose.

Design layered text shadows and copy the CSS.