CSS Box Shadow Generator

How to use the Box Shadow Generator

1. Adjust offset, blur, spread and opacity with the sliders.
2. Add layers to build smooth, realistic shadows, or start from a preset.
3. Change the preview colors and shape, then copy the code as CSS, Tailwind, a CSS or SCSS variable, or a drop-shadow filter.
4. Use Make smooth to turn one layer into five eased layers, and Save shadow to keep your favorites in this browser.

Box Shadow Generator features

• Offset, blur, spread, color, opacity and inset for every layer
• Unlimited layers that you can duplicate, hide and remove
• Make smooth: turn one layer into five eased layers
• 13 presets including Material, Layered, Neumorphic, Glow and Brutalist
• Preview on a square, card, button or circle with your own colors and radius
• Copy as CSS, Tailwind, a CSS or SCSS variable, or a drop-shadow filter
• Saved shadows kept in your browser

Create CSS box shadows visually

This box shadow generator lets you design shadows with sliders instead of guessing numbers. Adjust the offset, blur, spread, color and opacity, stack several layers for a realistic effect, and see the result on a live preview that can look like a card, a button, a square or a circle. When you are happy, copy the CSS, a Tailwind class, a CSS or SCSS variable, or a drop-shadow() filter.

Thirteen presets give you a head start, from subtle and soft UI shadows to Material Design elevation, neumorphism, glows and bold brutalist offsets.

The box-shadow property explained

A CSS box shadow is written as a list of values:

box-shadow: [inset] offset-x offset-y blur spread color;
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12);

Why layered shadows look better

Real objects cast more than one shadow: a small, darker shadow right where they touch the surface, and a larger, softer shadow from ambient light. A single box-shadow can only imitate one of these. Stacking two to five layers, each with more offset and blur and less opacity than the one before, produces the soft, natural depth you see in modern interfaces.

The Make smooth button does this for you. It turns the selected layer into five layers whose offset and blur grow along an easing curve, which gives a beautifully soft shadow in one click.

Presets to start from

• Soft, Subtle and Layered for everyday cards, dropdowns and modals.
• Material for Google Material-style elevation.
• Floating and Dreamy for large, airy shadows under hero images and pricing cards.
• Sharp, Brutalist and Outline for bold, flat and retro looks.
• Inset and Pressed for input fields and pressed buttons.
• Glow for focus rings and neon effects.
• Neumorphic for soft, extruded shapes. The light and dark shadows are calculated from your background color.

box-shadow vs drop-shadow()

box-shadow always follows the rectangular box of an element (including its rounded corners). The CSS filter: drop-shadow() instead follows the visible shape, so it is the right choice for transparent PNGs, icons and SVGs. It has no spread or inset, so the generator leaves those out and tells you when it does. Choose the drop-shadow filter output to get it.

Tips for great shadows

• Keep opacity low. Most good UI shadows use 4–25% black. Strong, dark shadows look dated.
• Tint shadows on colored backgrounds. A shadow mixed from the background color looks more natural than pure black; pick a darker shade with the Shades & Tints Generator.
• Use bigger offsets and blurs for elements that sit "higher", such as modals and menus, and small ones for cards and buttons.
• Be consistent: define a few shadow levels as CSS variables and reuse them across your site.

Save your shadows

Press Save shadow to keep a design, including its colors and corner radius, in your saved shadows. They stay in your browser, and your current shadow is remembered automatically. Combine it with a background from the CSS Gradient Generator to finish your component.

Box Shadow Generator: frequently asked questions