About CSS Generator
Gradients, shadows and radii are all easier to design by eye than to write by hand. A box shadow has five numbers and a colour, and the difference between one that looks like a real object and one that looks like a smudge is a matter of adjusting all six together while watching the result.
Everything here produces plain CSS with no dependencies and no vendor prefixes — all four features have been supported without prefixes in every current browser for years. The output is the code you paste, not a class name that requires a library.
The colour inputs share the same engine as the rest of the colour tools, so you can paste any format and use the picker interchangeably.
How to generate CSS
Choose what you are building
Gradient, box shadow, text shadow or border radius. Each has its own controls and preview.
Adjust until it looks right
Drag the sliders and pick colours. The preview updates live, so you are designing rather than guessing at numbers.
Copy the CSS
The generated rule appears below the preview, formatted and ready to paste.
Making shadows look real
- Use two or three layered shadows rather than one. Real objects cast a tight, dark shadow close to the edge and a wide, faint one further out; a single shadow cannot do both.
- Keep the blur larger than the vertical offset. A large offset with little blur reads as a hard, artificial drop.
- Never use pure black. A dark, slightly saturated version of the background hue looks far more natural than rgba(0,0,0,0.5).
- Push everything in one direction. Light comes from above in almost every interface, so shadows fall downward — a shadow offset upward looks immediately wrong.
- Bigger elevation means larger blur and larger offset together. A modal should cast a much softer, wider shadow than a button.
Gradient banding
Long, subtle gradients often show visible stripes. The cause is the eight bits per channel available on most displays: across a large area, adjacent steps become wide enough to see as bands.
The practical fixes are to add intermediate colour stops so the interpolation has more to work with, to increase the difference between the start and end colours, or to overlay a very faint noise texture, which breaks up the boundaries. A gradient between two colours of similar lightness bands the worst.