If you've ever spent 20 minutes nudging box-shadow offsets, or hand-writing a linear-gradient() only to get the angle wrong three times in a row, you already know: CSS values that look simple are often the most fiddly to write from memory.
That's exactly the itch these three tools scratch. They're all free, run entirely in your browser (nothing gets uploaded anywhere), and give you a live preview so you can just drag sliders until it looks right — then copy the generated CSS straight into your stylesheet.
1. Box Shadow Generator
Getting a shadow to look "just right" — not too harsh, not invisible — usually means tweaking four or five values at once: horizontal offset, vertical offset, blur radius, spread radius, and color/opacity. Doing that by editing raw CSS and refreshing the browser every time is slow.
The Box Shadow Generator gives you sliders for each of these with an instant live preview, plus support for multiple stacked shadows (handy for that popular "layered depth" look). When it looks right, hit copy and you've got production-ready CSS.
Good for: card hover effects, modal elevation, neumorphic UI, button depth.
2. Gradient Generator
Gradients are deceptively easy to get wrong — the wrong angle or color stop placement can make a background look muddy instead of smooth. This tool lets you pick your colors, drag stop positions, and switch between linear and radial gradients while watching the preview update live.
Good for: hero backgrounds, button fills, subtle section dividers, dark-mode-friendly overlays.
3. Border Radius Generator
border-radius looks like a one-value property until you need asymmetric corners (top-left different from bottom-right) for that "organic blob" or "squircle" look that's become common in modern UI design. Writing that shorthand by hand — border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% — from memory is basically impossible.
This generator lets you drag each corner independently and see the shape update in real time, so you can land on something that actually looks intentional instead of guessing at percentages.
Good for: blob shapes, avatar frames, illustrative UI accents, card corner treatments.
Why browser-based tools like these are worth bookmarking
None of these three require an account, a download, or sending your design data anywhere — everything runs client-side. That matters if you care about privacy, but it also just means they're fast: no loading spinners, no server round-trips, just instant feedback as you adjust values.
You can find all three (and more browser-based dev utilities) at samtoolkit.com.
Which of these do you reach for most — shadows, gradients, or border-radius? Let me know in the comments.
Top comments (0)