CSS Generator
Design gradients, box shadows and rounded corners visually and copy the CSS they need.
CSS Generator - Gradients, Box Shadows and Rounded Corners
Design three of the most used CSS effects by eye instead of by trial and error: gradients, box shadows and border radius. Move a slider or pick a colour and the preview box changes at once; the CSS under it is always exactly what the preview shows, ready to paste into a stylesheet.
The output uses the standard properties background, box-shadow and border-radius, which every current browser supports without vendor prefixes. Nothing is sent anywhere: the tool runs in your browser.
How to use it
- Choose Gradient, Box shadow or Border radius.
- Move the sliders, type exact numbers in the boxes beside them, or pick colours.
- Press Random for a starting point, or Reset to return to the defaults.
- Copy the CSS below the preview.
Gradients
A gradient is an image the browser draws, so it goes in background (or background-image) and scales to any size without blurring. Three kinds are available:
| Type | Example | Looks like |
|---|---|---|
| Linear | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | Colours change along a straight line at the angle you set |
| Radial | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | Colours spread out from the centre in rings |
| Conic | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | Colours turn around the centre like a colour wheel |
Each colour has a position in percent. Two colours at the same position give a hard edge instead of a blend, which is how stripes and pie charts are made with pure CSS. Use Add colour for up to six stops, spread evenly; Remove colour takes the last one away, down to two.
Angles in CSS start at the top and turn clockwise: 0deg goes upward, 90deg to the right and 180deg downward.
Box shadows
A box shadow takes up to five values: horizontal offset, vertical offset, blur, spread and colour, plus the optional keyword inset.
- Horizontal and Vertical move the shadow; negative values move it left or up.
- Blur softens the edge. 0 gives a hard shadow, like a cut-out.
- Spread grows the shadow before blurring. A negative spread with a large blur gives the soft, lifted look common in modern interfaces.
- Opacity is built into the colour as
rgba(), so the shadow never hides what is behind it. - Inner shadow (inset) draws it inside the box, which makes it look pressed in.
Subtle shadows usually look better than strong ones: a dark, slightly transparent colour taken from your palette, rather than pure black, blends in more naturally.
Border radius
With Same value for all corners ticked, one slider rounds all four corners. Untick it to set each corner on its own; the CSS then lists four values in the order top left, top right, bottom right, bottom left.
In pixels, the rounding stays the same at any size. In percent it follows the box: border-radius: 50% turns a square into a circle and a rectangle into an ellipse.
Related tools
To convert a colour between HEX, RGB and HSL, or find one that has enough contrast with its background, use the colour converter. To tidy or minify the stylesheet you paste the CSS into, use the code formatter. The task pages open this tool on one effect: CSS gradient generator, box shadow generator and border radius generator.