Design

SHD

CSS Box Shadow Generator

Create beautiful CSS box shadows with a visual builder and live preview

Presets

Shadow Layers (1)

Layer 1

X Offset

Y Offset

Blur

Spread

Opacity

Color

Inset

Live Preview

Box

Size200px

CSS

.element {
  box-shadow:
    5px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

No vendor prefix needed for modern browsers. Add -webkit-box-shadow only if you must support very old Android / iOS Safari.

Tailwind CSS

shadow-[5px_5px_15px_0px_rgba(0,0,0,0.2)]

Uses Tailwind's arbitrary value syntax. Works with Tailwind v3+.

React / Inline Style

style={{ boxShadow: "5px 5px 15px 0px rgba(0, 0, 0, 0.2)" }}

Share to Community

Was this tool helpful?

What is CSS Box Shadow Generator?

Free online CSS box shadow generator to design CSS box shadows visually with sliders for horizontal offset, vertical offset, blur radius, spread radius, and color.

Add multiple shadow layers for complex effects, toggle inset shadows, and see a live preview on a customizable element. Stack layered shadows for soft material-style elevation or neumorphism, generate a subtle card shadow, and copy the box-shadow CSS with one click. The live preview shows the effect on a card so you can dial in a drop shadow before you copy it. Perfect for creating card effects, buttons, modals, and any element that needs depth and dimension. No signup required.

How to Use CSS Box Shadow Generator

1Adjust the sliders for horizontal offset, vertical offset, blur, and spread
2Pick a shadow color and adjust its opacity
3Toggle 'Inset' for an inner shadow effect
4Add multiple shadow layers and copy the final CSS code

Frequently Asked Questions

The CSS box-shadow property adds shadow effects around an element's frame. You can set the horizontal and vertical offsets, blur and spread radii, color, and whether it's an inner (inset) or outer shadow. Multiple shadows can be layered for complex effects.

Yes. Click 'Add Shadow' to add additional shadow layers. Each layer has its own offset, blur, spread, and color settings. Multiple layers can create realistic depth effects like elevated cards or neumorphism.

An inset shadow appears inside the element instead of outside. It's commonly used for pressed button states, input fields, and neumorphic designs. Toggle the 'Inset' option to switch between inner and outer shadows.

Stack two layers: a close layer with a small offset and low blur for definition, and a larger layer with more blur and lower opacity for the soft falloff. Keep the colors as low-alpha black so the shadow reads as depth rather than a hard outline.

Yes. Add two shadow layers with opposite offsets, one light and one dark, on an element that matches its background color. The light shadow on one side and the dark shadow on the other create the soft extruded look used in neumorphic UI.

Share this tool

Related Tools

🎛️

Neumorphism Generator

Free online neumorphism generator - generate soft UI neumorphic CSS styles

GRD

CSS Gradient Generator

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

⬛

CSS Flexbox Generator

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

▦

CSS Grid Generator

Free online CSS grid generator - visual CSS grid layout builder with live preview and code export

What is CSS Box Shadow Generator?

Free online CSS box shadow generator to design CSS box shadows visually with sliders for horizontal offset, vertical offset, blur radius, spread radius, and color.

Frequently Asked Questions