Best Free CSS Generators (2026)
Gradients, shadows and radii — visually, with copy-paste CSS out the other end.
The CSS generators worth using are a gradient generator, a box-shadow generator and a border-radius generator — all three are properties where typing values blind is slow and seeing the result is instant. A practical tip most generators won't tell you: layered shadows look far better than one big one, because real objects cast both a tight contact shadow and a soft ambient one.
Last updated 17 July 2026 IST · Maintained by SnoopTool, a free online tools website with 165+ browser-based utilities.| Tool | Generates | Tip |
|---|---|---|
| Gradient Generator | linear-gradient() | Avoid pure purple-to-blue; it reads as generic |
| Box Shadow | box-shadow | Layer 2-3 shadows, don't use one big blur |
| Border Radius | border-radius | Nested elements need a smaller inner radius |
| Colour Palette | Hex sets | Pick one accent, not five |
| Hex to RGB | rgb() / rgba() | Needed for alpha transparency |
| Colour Picker | Any format | Sample from a screenshot |
| Colour Blindness Simulator | Preview | ~8% of men are red-green colourblind |
| CSS Minifier | Minified CSS | Ship smaller stylesheets |
Why your shadows look fake
The default instinct is one shadow with a big blur: box-shadow: 0 4px 20px rgba(0,0,0,.3). It reads as a grey smudge, because real objects don't cast one shadow.
Real objects cast a tight, dark contact shadow where they meet the surface, and a wide, soft ambient shadow further out. Stack them:
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
Two more rules that matter more than the values. Keep every shadow on a page lit from the same direction (positive Y, i.e. light from above) — mixed directions read as broken. And use a very low opacity on the ambient layer: 0.15–0.2 is usually plenty. Anything near 0.4 looks like a drop shadow from 2003.
The border-radius rule nobody applies
When you nest a rounded element inside another — a rounded button inside a rounded card — using the same radius on both makes the gap look wrong, thicker at the corners than the sides.
The correct relationship: inner radius = outer radius − padding. A card with 16px radius and 8px padding wants an 8px radius on the child. This is why iOS interfaces look precisely machined and hand-built ones often don't — it's a small detail that reads as polish.
Also worth knowing: border-radius takes eight values, not four. border-radius: 20px 40px / 40px 20px makes elliptical corners — the slash separates horizontal from vertical radii. Rarely needed, but it's how organic blob shapes are made without SVG.
Tools used in this guide
Frequently asked questions
How do I make a CSS box shadow look realistic?
Layer two or three shadows instead of one. Real objects cast a tight contact shadow plus a soft ambient one: box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18). Keep opacity low (0.15–0.2 for the ambient layer) and light every shadow on the page from the same direction. A single large blur at high opacity is what makes shadows read as fake.
What border radius should a nested element have?
Inner radius = outer radius minus padding. A card with a 16px radius and 8px padding needs an 8px radius on any child that sits flush inside it. Using the same radius on both makes the gap appear thicker at the corners than along the edges. It's a small detail, but it's a large part of why some interfaces look machined and others look approximate.
How do I convert hex to RGBA for transparency?
Use a hex to RGB converter and add an alpha value: #3a4796 becomes rgba(58, 71, 150, 0.5) at 50% opacity. Modern CSS also accepts 8-digit hex with alpha (#3a479680), supported in all current browsers. Use rgba() when the alpha needs to be dynamic, since it's easier to read and edit.
Why should I check my colours for colour blindness?
Around 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly red-green. A red 'error' and green 'success' state that differ only in hue are indistinguishable to those users. Run your palette through a colour blindness simulator, and always pair colour with a second signal — an icon, a label, or a shape.
Need a tool we don't have yet?
Tell us what you're trying to do. We build the most-requested tools first — every SnoopTool utility is free, runs in your browser, and needs no sign-up.