Tools · the support layer
Make the pieces, privately.
Every tool runs 100% in your browser. Your colors, code and layouts never leave your device. Tune it live, copy the CSS, ship it.
Palette Generator
Generate an OKLCH palette from a base color, or extract one from an image. Copy CSS vars or Tailwind.
Open →Contrast Checker
Check any text/background pair against WCAG AA and AAA, with a live preview.
Open →Gradient Generator
Build linear, radial & conic CSS gradients with live preview and copy-ready code.
Open →Box-Shadow Generator
Layer realistic shadows with offset, blur, spread and color — copy the CSS.
Open →Glassmorphism Generator
Frosted-glass cards with backdrop-blur, tint and border — tuned live.
Open →CSS Filters Playground
Blur, brightness, contrast, saturate, hue-rotate and more — tuned live, copy the filter.
Open →Border-Radius Generator
Round each corner independently, preview live, and copy clean border-radius CSS.
Open →Blend-Mode Explorer
See every CSS blend mode applied between two layers, then copy the mix-blend-mode.
Open →Bento Grid Builder
Pick a modern bento layout, tune the gap & radius, and export the CSS Grid.
Open →Clip-Path & Masks
Cut elements into circles, polygons and custom shapes — copy the clip-path.
Open →3D Transform Playground
Tilt and rotate in 3D with perspective, then copy the transform.
Open →CSS → Tailwind
Convert plain CSS declarations into Tailwind utility classes.
Open →