UtilityBaseDeveloper Tools
CSS Box Shadow Generator
Design a box-shadow visually with sliders and copy the CSS instantly.
Updated July 10, 2026
How to use the css box shadow generator
- 1Drag the offset, blur, and spread sliders.
- 2Set the opacity and pick a color.
- 3Toggle inset for an inner shadow.
- 4Copy the generated CSS rule.
Common uses
- Styling cards, buttons, and modals
- Prototyping shadow depth quickly
- Matching a shadow to a design spec
- Learning how box-shadow values work
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius, and color. Offsets move the shadow, blur softens it, spread grows or shrinks it, and an optional inset keyword pushes the shadow inward instead of outward.
How do I make a subtle, modern shadow?
Use a small offset, a generous blur, a slightly negative spread, and low opacity — for example a soft dark shadow at around 15 to 25% opacity. Large, fully-opaque shadows look dated; soft and low-contrast reads as modern and believable.
Can I add more than one shadow?
Yes. CSS allows multiple shadows on one element, separated by commas. Generate one here, then paste and add another comma-separated shadow in your CSS to layer effects like a close shadow plus a soft ambient one.
About this tool
The CSS box-shadow generator lets you design a shadow visually — drag sliders for horizontal and vertical offset, blur, spread, and opacity, pick a color, and toggle inset — with a live preview and ready-to-paste CSS. A believable modern shadow usually means a small offset, generous blur, slightly negative spread, and low opacity; harsh opaque shadows look dated. Copy the rule straight into your stylesheet, and stack multiple shadows by comma-separating them. Everything renders live in your browser.
Like most tools on UtilityBase, the css box shadow generator runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more developer tools here.
Was this tool helpful?
Related tools
CSS Gradient Generator
Build a linear or radial CSS gradient visually and copy the ready-to-paste code.
Developer Tools
Hex to RGB Converter
Convert colors between HEX, RGB, and HSL — edit any field and the rest update.
Developer Tools
Color Picker
Pick a color and get HEX, RGB, and HSL values with shades and tints.
Image Tools
Color Palette Generator
Turn one base color into complementary, analogous, triadic, and shade palettes.
Generators
What Is My IP
Your public IP, and exactly what it reveals — location, ISP, timezone.
Developer Tools
Regex Tester
Test regular expressions live with match highlighting, groups, and a cheat sheet.
Developer Tools