A polished, single-file studio for designers: build color palettes, gradients, shadows, grids, glass effects, and timing curves — then check accessibility. Everything runs live in your browser, with exports and local saving.
Pick a base color and a harmony rule. Lock the colors you love, randomize the rest, and export your palette as CSS variables or JSON — saved locally for later.
No saved palettes yet — hit “Save” to store one locally.
Compose multi-stop gradients with precise color positions. Choose linear with an angle or radial, preview live, then copy production-ready CSS.
No saved gradients yet.
Sculpt a shadow with offset, blur, spread, color and opacity. Toggle inset, preview on a real box, and save presets you use often.
No saved presets yet.
Define columns, rows, gap and template areas. Watch the layout render live and copy clean, ready-to-paste grid CSS.
Browse curated heading + body font combinations, filtered by mood. Each card shows the pairing at multiple sizes — copy the Google Fonts link and CSS in one click.
Tune background blur, opacity, border and shadow on a frosted card sitting over a vivid gradient. Copy the CSS and drop it onto any element.
This card blurs whatever sits behind it. Adjust the sliders to dial in the perfect frost.
ActionPick an easing function, watch a ball travel the track, and inspect the timing curve. For cubic-bezier, drag the control points — then copy the CSS.
Pick foreground and background colors to get the WCAG 2.1 contrast ratio and pass/fail results for AA and AAA, normal and large text.
Everything you need to know about the Premium Design Toolkit.