Border radius generator
Shape all four corners with live CSS previews and pixel or percentage radii.
← All tools
Design & CSS tools
Visual CSS tools with exact, copyable output.
Box shadow generator
Adjust shadows visually with offsets, blur, spread, color and inset controls.
Color converter
Convert HEX, RGB and HSL colors with a live swatch and explicit transparency.
Contrast checker
Check text contrast with live reading samples and WCAG AA and AAA thresholds.
CSS clamp calculator
Create fluid font sizes and scrub the viewport to preview the interpolation.
CSS filter generator
Tune image-style filters with a live before-and-after illustration and CSS output.
Cubic Bézier editor
Shape an easing curve with draggable handles, exact points and a motion preview.
Gradient generator
Design linear and radial gradients with color stops and an immediate preview.
Palette generator
Build harmonious five-color palettes from a base color and copy them as CSS variables.
Typography scale
Preview a modular type scale with your own text, ratio and font style.
Generate border radii, shadows, gradients, filters, clamps, palettes, and type scales, or debug easing curves and contrast. Each tool previews the result and exports the exact declaration.
The previews are scoped to the tool, so experimenting never changes the rest of the site.
From colour to layout
The colour tools work together: convert a brand colour between HEX, RGB, and HSL, generate a harmonious palette from it, and check every text and background pair with the contrast checker against WCAG AA and AAA thresholds. Gradients, shadows, border radii, and CSS filters each have a visual generator that exports the exact CSS declaration.
For typography, the type scale tool builds a modular set of font sizes from a base size and ratio, and the clamp calculator turns a minimum and maximum size into a fluid CSS clamp() expression that scales smoothly between two viewport widths. The cubic Bézier editor shapes easing curves for transitions and animations.
Accessible by default
Good-looking and accessible are not in conflict, but they have to be checked. Around one in twelve men has some form of colour vision deficiency, and low-contrast grey text is the most common accessibility failure on the web. Check contrast for body text, placeholder text, buttons, and text over images. Use rem units in fluid type so text still grows when readers raise their browser's font size, and respect reduced-motion preferences for animation.
Every preview is scoped to the tool, and the exported CSS uses modern, widely supported syntax, so it can be pasted into a stylesheet, a design token file, or a component as it is.