CSS tools that write the CSS of now.

Mix colours with color-mix() and compare OKLCH against sRGB, then derive hover, muted and border colours from one brand colour.

Palette Generator

Generate an OKLCH palette from a base color, or extract one from an image. Copy CSS vars or Tailwind.

Gradient Generator

Linear, radial and conic gradients, now blended in OKLCH so the middle stays vivid, with a classic fallback line.

Contrast Checker

Check any text/background pair against WCAG AA and AAA, with a live preview.

Blend-Mode Explorer

See every CSS blend mode applied between two layers, then copy the mix-blend-mode.

Layout, type and sizing

Components that size themselves, fluid scales, text that wraps well, and things tethered to other things.

Fluid clamp() Calculator

Type and spacing that scale between two widths. Zoom-safe rem output, viewport or container basis, and a full modular scale.

Container Query Builder

Build an @container rule and test it in a container you drag. Named containers, range syntax, cqi type.

Anchor Positioning Playground

Tether a tooltip to a button in CSS. Drag the anchor to the edge and watch the fallbacks flip it. Output is fallback first.

Limited availabilityOpen →

Bento Grid Builder

Pick a modern bento layout, tune the gap & radius, and export the CSS Grid.

Logical Properties Converter

Turn left and right into inline-start and end, with a report of every line changed and the ones left on purpose.

text-wrap Compared

wrap, balance, pretty and stable on your own text, at a width you drag.

Motion

Easing with real physics, and animation driven by scroll and state, each with a reduced-motion exit.

Easing Studio

cubic-bezier, plus real springs and bounces as linear(), solved from stiffness, damping and mass.

Keyframes Generator

Ten animations worth using, written with translate, scale and rotate, each with its reduced-motion block.

Scroll Animation Builder

Reveal on enter with view(), or a progress bar with scroll(). Guarded by @supports and reduced motion.

Limited availabilityOpen →

View Transition Builder

Crossfades, slides and a named element that morphs between layouts, on one page or across page loads.

@property Builder

Type a custom property so gradients and colours animate instead of snapping. Registered and unregistered, side by side.

3D Transform Playground

Tilt and rotate in 3D with perspective, then copy the transform.

Shape and surface

Corners, shadows, glass, masks and filters.

Border-Radius Generator

Round each corner independently, preview live, and copy clean border-radius CSS.

Box-Shadow Generator

Layer realistic shadows with offset, blur, spread and color — copy the CSS.

Glassmorphism Generator

Frosted-glass cards with backdrop-blur, tint and border — tuned live.

CSS Filters Playground

Blur, brightness, contrast, saturate, hue-rotate and more — tuned live, copy the filter.

Clip-Path & Masks

Cut elements into circles, polygons and custom shapes — copy the clip-path.

Selectors and the cascade

Which rule wins, and how to write fewer of them.

Specificity Calculator

Rank selectors and see which wins, with :is(), :not(), :has() and :where() scored the way the spec says.

:has() Playground

Six jobs the parent selector took from JavaScript, live on markup you can click.

@scope Playground

A rule that starts at one element and stops at another, so styles never leak into a nested component.

CSS → Tailwind

Convert plain CSS declarations into Tailwind utility classes.