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.
Is the output standard CSS?
Yes, and you can paste it straight into a stylesheet to check. At the page defaults the gradient panel outputs background: linear-gradient(90deg, #3388cc, #8833cc);, the shadow box-shadow: 5px 5px 15px 0px #000000; and the radius border-radius: 20px 20px 20px 20px;. All three are spec syntax with no invented shorthand and no vendor prefixes — prefixes are noise now, unnecessary in every major browser for about a decade.