devprix.io

CSS Box Shadow Generator

Create beautiful box shadows with live preview. Multiple layers, presets, and CSS/Tailwind output.

Shadow layers (1/5)

Offset X
Offset Y
Blur
Spread
Color
Opacity

Preview

Preview

CSS

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Tailwind CSS

shadow-[0px_4px_12px_0px_rgba(0,_0,_0,_0.15)]
Valid box-shadow1 of 1 layer onPreset: MediumProcessed locally

How to use it

  1. Start from a preset or tune the layer sliders: offset, blur, spread, colour and opacity.
  2. Add up to 5 layers, toggle inset, and check the preview on a light and a dark background.
  3. Press Copy CSS (⌘↵) or copy the Tailwind class.

Related tools

CSS Gradient GeneratorCSSColor ConverterConvertTailwind CSS LookupCSS

What is CSS Box Shadow?

CSS box-shadow adds shadow effects around an element's frame. Shadows are defined by horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be layered for more realistic effects. This generator provides visual controls for all parameters, supports multiple shadow layers, and outputs both CSS and Tailwind shadow classes.

Common use cases

  • Creating elevation effects for cards and modals
  • Designing subtle depth cues for UI components
  • Building neumorphism and glassmorphism effects
  • Generating multi-layer shadows for realistic depth
  • Converting shadow designs to Tailwind CSS classes

Frequently asked questions

What is the difference between box-shadow and drop-shadow?

box-shadow applies to the element's rectangular box. filter: drop-shadow() follows the element's actual shape including transparent areas. Use drop-shadow for non-rectangular elements like images with transparency or CSS clip-path shapes.

How many shadows can I stack?

There's no limit. Multiple shadows are comma-separated and rendered in order (first shadow on top). Common patterns use 2-3 layers: a tight, dark shadow for definition and a larger, lighter shadow for ambient depth.