Design Tools

CSS gradients, shadows and rounded corners, fluid type, aspect ratios and color scales — with live previews and ready-to-copy CSS.

Aspect Ratio Calculator
Find the aspect ratio of any size (1920 × 1080 is 16:9) and resize while keeping it.
Border Radius Generator
Round the corners of a box together or one by one, and get the shortest CSS.
Box Shadow Generator
Build layered CSS box shadows with sliders and a live preview, including inner shadows.
CSS Clamp Calculator
Make font sizes and spacing scale smoothly between two screen widths with CSS clamp().
CSS Gradient Generator
Design linear, radial and conic CSS gradients with a live preview and copy the CSS.
PX to REM Converter
Convert pixels to rem and back for any root font size, with a table of common sizes.
Tint and Shade Generator
Make lighter tints and darker shades of a color, with a 50–900 scale of CSS variables.
Type Scale Generator
Create a harmonious set of font sizes from a base size and a ratio, with CSS variables.