Box Shadow Generator

How to Use the Box Shadow Generator

1. Adjust the horizontal offset — drag the first slider to move the shadow left (negative values) or right (positive values). Most card shadows use a small positive value or zero.
2. Adjust the vertical offset — the second slider moves the shadow up or down. A downward shadow (positive value) suggests a light source above the element, which feels natural.
3. Set the blur radius — higher values make the shadow softer and more diffused. A 0px blur produces a hard-edged shadow; 20–40px gives a soft, modern look.
4. Set the spread radius — positive values expand the shadow outward in all directions; negative values shrink it. Use this to make shadows bolder without increasing blur.
5. Pick a color and opacity — choose the shadow color and dial the opacity down (15–30% black is a safe starting point for light interfaces).
6. Toggle inset if needed — check the inset box to draw the shadow inside the element instead of outside, useful for pressed or recessed effects.
7. Copy the CSS — click “Copy CSS” and paste the box-shadow declaration into your stylesheet. Done.

Features That Set This Tool Apart

• Full parameter control — offset X/Y, blur, spread, color, opacity, and inset are all adjustable, covering the complete box-shadow syntax.
• Live visual preview — the preview box updates instantly as you drag any slider, so you see exactly what your CSS will produce.
• Opacity handled correctly — the tool converts your color and opacity into a proper rgba() value instead of making you do the math.
• One-click copy — the generated declaration is copied to your clipboard with a single click, ready to paste.
• No signup, no tracking — a box shadow generator should not need your email address. This one runs entirely in your browser.

Understanding the Box-Shadow Syntax

The CSS box-shadow property looks cryptic until you break it into its parts. The full syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. The only required values are the two offsets; everything else has a sensible default (0 blur, 0 spread, current text color).

The offset-x and offset-y values position the shadow relative to the element. Positive x pushes the shadow right, positive y pushes it down. A shadow of 0 8px sits directly below the element, which is the classic “floating card” look. Negative values are perfectly valid and useful for top or left lighting effects.

The blur radius controls how soft the shadow’s edge is. Technically, the browser draws the shadow shape and then applies a Gaussian blur of the given radius. Larger blur values spread the shadow’s energy over a wider area, which also makes it appear lighter — so if you increase blur a lot, you may want to raise opacity slightly to compensate.

The spread radius is the least understood parameter. Positive spread grows the shadow’s base shape before blurring; negative spread shrinks it. A spread of -2px with moderate blur creates a tight, realistic contact shadow, while 10px spread makes a bold, dramatic halo. Designers often reach for spread when they want a stronger shadow without the washed-out look of extreme blur.

You can also stack multiple shadows by separating them with commas, for example box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.12);. Layering a tight shadow with a wide soft one mimics how real light behaves and is the secret behind most premium-looking card designs. The shadows are painted front-to-back, so list the closest shadow first.

Designing Beautiful Shadows: Practical Tips

Good shadows are invisible in the best way — they create depth without drawing attention to themselves. Start with a neutral dark color at low opacity rather than pure black at full strength; rgba(0,0,0,0.12) to rgba(0,0,0,0.2) suits most light interfaces. For dark mode, shadows barely register on dark backgrounds, so consider a subtle light glow or a border instead.

Match the shadow to the elevation of the element. A resting card might use 0 1px 3px rgba(0,0,0,0.1), while the same card on hover could lift to 0 12px 32px rgba(0,0,0,0.18). Animating between these two states with a transition on box-shadow creates a satisfying tactile feel. Keep the transition around 200–300ms so it feels snappy, not sluggish.

Colored shadows are an underused technique. Instead of black, sample a tint of your brand color — a blue button with a soft blue shadow (rgba(37,99,235,0.35)) looks cohesive and modern. The box shadow generator above lets you pick any color, so experiment with shadows that echo your palette rather than defaulting to gray.

Watch out for performance. Large blurred shadows are expensive for the browser to paint, especially when animated or applied to many elements at once. If a page feels janky, reduce blur radii or the number of shadowed elements. For animations, prefer transitioning transform and opacity (which the GPU handles well) and keep shadow changes subtle.

Finally, test shadows on real backgrounds. A shadow tuned against pure white may look wrong on a light gray page or a photo background. Check your design in context, and remember that shadows on colored surfaces often look better when tinted toward the surface color rather than neutral black.

Box Shadow vs. Other Depth Techniques

Box shadows are the most common way to create depth, but they are not the only option. Borders (e.g. border: 1px solid #e5e7eb) define edges crisply and cost almost nothing to render, which is why many minimal interfaces use borders alone or combine a hairline border with a very subtle shadow.

Drop-shadow filters (filter: drop-shadow(...)) follow the element’s alpha channel, so they wrap around transparent PNGs and irregular shapes where box-shadow would just draw a rectangle. The tradeoff is performance: filters are significantly more expensive and can hurt scrolling smoothness.

Gradients and layering can imply depth without any shadow at all — a slightly darker strip at the bottom of a card, or overlapping elements with careful z-ordering, creates hierarchy through composition rather than effects. This approach ages well and never triggers performance warnings.

In practice, most professional designs combine techniques: a 1px border for definition plus a soft box shadow for lift. The MDN documentation on box-shadow covers the full syntax including multiple shadows, and the drop-shadow() filter reference explains when filters are the better choice.

Box Shadow Generator: Frequently Asked Questions

What is a box shadow generator?

A box shadow generator is a visual tool that lets you design CSS box shadows with sliders and color pickers instead of writing code by hand. You adjust the horizontal and vertical offset, blur radius, spread radius, color, and opacity while watching a live preview, then copy the finished box-shadow declaration into your stylesheet. It removes the trial-and-error cycle of editing CSS, refreshing the browser, and guessing which value to change next.

How do I add a box shadow to a div?

Add the box-shadow property to your div’s CSS rule, for example div.card with box-shadow: 0 4px 12px rgba(0,0,0,0.15). You can place it in a stylesheet, a style tag, or an inline style attribute. The two offset values are required; blur, spread, and color are optional. Use this box shadow generator to preview the effect visually, then paste the copied declaration wherever your div is styled.

What is the difference between blur radius and spread radius?

Blur radius softens the shadow’s edge by applying a blur of the given size, making the shadow more diffused and lighter-looking as the value grows. Spread radius expands or contracts the shadow’s base shape before blurring: positive values make the shadow larger in every direction, negative values shrink it. Use blur for softness and spread for the shadow’s overall size and boldness.

How do I make an inset box shadow?

Add the inset keyword at the start of the declaration, like box-shadow: inset 0 2px 8px rgba(0,0,0,0.2). An inset shadow is drawn inside the element’s border box instead of outside it, creating a pressed-in or recessed appearance. In the generator above, simply check the inset box and the keyword is added automatically. Inset shadows are great for form fields, wells, and pressed button states.

Do box shadows work in all browsers?

Yes, the box-shadow property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge, and has been for over a decade. No vendor prefixes are needed today. Very old versions of Internet Explorer (8 and earlier) do not support it, but those browsers are long obsolete. Multiple comma-separated shadows and the inset keyword are equally well supported across current browsers.

Related Free Tools

• CSS Minifier — shrink your stylesheets for faster page loads.
• Border Radius Generator — design perfect CSS corners visually.
• Image Color Picker — sample colors from any image for your shadows.
• All Free Tools — browse the complete collection of free online tools.

A good box shadow generator turns one of CSS’s fiddliest properties into a thirty-second task. Dial in your offsets, blur, and spread, copy the code, and get back to building — your cards will thank you.