CSS Box Shadow Generator

Design beautiful box shadows visually with live preview. Adjust offset, blur, spread, color, and inset — copy the generated CSS instantly. 100% browser-based.

Colors
#000000
#ffffff
#f1f5f9
Generated CSS
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.20);

What is CSS Box Shadow Generator?

A CSS box shadow generator lets you visually design box-shadow styles for HTML elements and generates the exact CSS code you need to apply them in your stylesheet. The CSS box-shadow property adds one or more shadows to an element's box model, creating depth, elevation, and visual separation effects that are fundamental to modern flat and material design aesthetics. A box shadow is defined by four values (horizontal offset, vertical offset, blur radius, spread radius), a color (including alpha transparency), and an optional inset flag that draws the shadow inside the element rather than outside. The CSS Box Shadow Generator provides visual sliders for every parameter, a live preview that shows the shadow on a card element in real time, a color picker with opacity control, the ability to stack multiple shadow layers for complex effects, and one-click copy of the generated CSS property value.

How to Use CSS Box Shadow Generator

  1. Use the sliders to adjust horizontal offset, vertical offset, blur radius, and spread radius.
  2. Click the color swatch to open the color picker and choose your shadow color and opacity.
  3. Toggle Inset to switch between an outer shadow (drop shadow) and an inner shadow (inset).
  4. Watch the live preview update in real time as you adjust each parameter.
  5. Click Add Shadow Layer to stack multiple shadow definitions for complex effects.
  6. Click Copy CSS to copy the complete box-shadow property value to your clipboard.

Frequently Asked Questions