Design & Colour
Convert colours between HEX, RGB and HSL, check text contrast against WCAG, build accessible palettes, and generate CSS for gradients, shadows, border radius, grids and flexbox, with a live preview as you go.
Copy the CSS straight into your stylesheet when it looks right.
Popular design & colour
Box Shadow GeneratorBuild layered and inset CSS box shadows with a live preview.Colour ConverterConvert between HEX, RGB, HSL and HSV with a live preview.CSS Gradient GeneratorDesign linear, radial and conic gradients and copy the CSS.Contrast CheckerWCAG contrast ratio with AA and AAA pass or fail.PX to REM ConverterPixels to rem and back, with any root font size.Border Radius GeneratorRound corners, pills, circles and blob shapes with a live preview.
More design & colour
Accessible Palette CheckerWCAG contrast grid for a whole palette, with a minimal-change lightness fixer.Aspect Ratio CalculatorSimplify ratios and calculate missing width or height.Clip Path GeneratorPolygon, circle, ellipse and inset clip-paths with draggable points.Color Blindness SimulatorSimulate colour vision deficiencies on a palette, with clash warnings.Color Palette GeneratorColour harmonies and a Tailwind-style 50–950 scale from one base colour.Colour MixerBlend two colours in three colour spaces and build a stepped scale between them.CSS Grid GeneratorDrag out named grid areas and copy grid-template-areas CSS with matching HTML.CSS Triangle GeneratorPure CSS triangles and tooltip arrows using borders or clip-path.Flexbox PlaygroundTry every flexbox property on live boxes and copy the resulting CSS.Glassmorphism GeneratorFrosted glass cards with backdrop-filter, previewed live.Text Shadow GeneratorLayered CSS text shadows with neon, 3D, outline and long shadow presets.