What is a CSS generator?
Gradients, shadows and rounded corners are hard to get right by typing numbers — you tweak, look, and tweak again. This CSS generator turns them into sliders and color pickers with a live preview, so you can drag until it looks right and then copy clean CSS. It includes three tools: gradients (linear / radial), box-shadow and border-radius. Everything runs locally in your browser.
How to use
- Switch tabs at the top: Gradient, Box Shadow or Border Radius.
- Drag the sliders and pick colors — the preview updates instantly.
- Click "Copy CSS" and paste the generated code into your stylesheet.
Common use cases
- Quickly design gradient backgrounds and shadows for buttons and cards.
- Dial in the exact rounding without guessing numbers.
- Learn CSS by seeing "value ↔ visual effect". Need color-code conversion? Use the color converter.
Why does my shadow look fake?
The usual culprit is solid black + a big offset + zero blur, which looks like a black slab stuck behind the element. Real shadows are soft, semi-transparent and only slightly offset: try a small offset (say 2–6px), moderate blur (10–20px) and a low-opacity dark color (e.g. rgba(0,0,0,0.15)) and it reads far more naturally. One thing people forget: box-shadow takes up no layout space — unlike a border, it doesn't push neighboring elements around, so adding one never changes your layout. For a "glow", use a bright color, set the offset to 0 and increase the blur. Once your three effects look right, convert colors between HEX, RGB and HSL with the color converter.