🎨

CSS & Design Generators

18 tools

All 18 tools

GRADIENT

CSS Gradient Generator

Build linear and radial CSS gradients with live preview, three colour stops and copy-ready code.

Open →SHADOW

Box Shadow Generator

Design CSS box-shadows with offset, blur, spread, colour and opacity, then copy the declaration.

Open →RADIUS

Border Radius Generator

Set each corner independently and copy the short or long-hand border-radius declaration.

Open →ANIMATION

CSS Animation Generator

Pick a keyframe preset, tune duration and easing, and copy the animation plus @keyframes block.

Open →TRANSITION

CSS Transition Generator

Generate transition declarations with property, duration and easing, and hover the live preview.

Open →TEXT

Text Shadow Generator

Build readable text shadows with offset, blur and colour, with a live sample headline.

Open →FLEXBOX

Flexbox Generator

Configure flex direction, justification, alignment, wrapping and gap with a live rendered preview.

Open →GRID

CSS Grid Generator

Set column count, optional rows and gap to generate a responsive CSS Grid layout.

Open →COLOUR

Hex to RGB Converter

Convert any hex colour to rgb() and hsl() values with a live swatch and CSS snippet.

Open →COLOUR

RGB to HSL Converter

Convert RGB channel values to HSL and hex, with clamping and a live colour swatch.

Open →PICKER

Color Picker Online

Pick a colour and read hex, RGB, HSL and approximate CMYK values side by side.

Open →A11Y

WCAG Color Contrast Checker

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

Open →PALETTE

Color Palette Generator

Generate analogous, complementary, triadic or monochrome palettes from a base colour, as CSS variables.

Open →RANDOM

Random Color Generator

Generate a batch of random hex colours for testing, mockups and placeholder palettes.

Open →SVG

SVG Pattern Generator

Generate tileable SVG background patterns — dots, lines, grid, checker, cross — and export the file.

Open →SVG

SVG Compressor

Strip comments, metadata and redundant whitespace from SVG markup and see the byte savings.

Open →TYPE

Line Height Calculator

Convert a font size and ratio into px, unitless and percentage line-height values with a live sample.

Open →TYPE

Font Size Calculator

Convert px, rem, em and pt, and generate a modular type scale from a base size and ratio.

Open →

What you can do here

Eighteen utilities for the CSS you write every day: visual generators with live preview and copy-ready output, colour conversion and WCAG contrast checking, SVG pattern synthesis and an SVG optimiser, plus line-height and type-scale maths.

Built for fast iteration

Every generator previews live as you drag a slider and hands you copy-ready code. No plugins, no build step, no account — paste the output straight into your stylesheet, component or design system.

Frequently Asked Questions

Do the generators output plain CSS?

Yes — every generator produces standard CSS you can paste into any stylesheet, component or design system. No preprocessor required.

Is the preview live?

Yes. Sliders, colour pickers and selects update the preview and the code as you change them.

Can I use the output commercially?

Yes, without attribution. The generated CSS belongs to you.