Free Tool
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offsets, blur, spread, color, and opacity — then copy the ready-to-use CSS value.
CSS Box Shadow Generator
Shadow 1
px
px
px
px
20%
Live Preview
CSS Output
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);What is CSS box-shadow?
The CSS box-shadow property adds one or more shadow effects to an element's frame. Each shadow is defined by its horizontal and vertical offset, blur radius, spread radius, color, and an optional inset keyword that moves the shadow inside the element.
Multi-layer shadows
You can stack multiple shadow layers to achieve depth effects, glow effects, or simulated borders. Layers are rendered back-to-front, so the first shadow in the list appears on top.
How to use
- Click 'Add Shadow' to create a shadow layer.
- Adjust the offset, blur, spread, color, and opacity sliders.
- Toggle 'Inset' to create an inner shadow.
- Add more layers to build complex effects.
- Copy the value or full declaration to your clipboard.
Your data stays in your browser — no data is sent to any server.
Frequently Asked Questions
- What is the difference between blur and spread?
- Blur radius controls how soft the shadow edges are — a higher value creates a more diffuse shadow. Spread radius expands or shrinks the shadow size beyond the element's bounding box, without affecting softness.
- What does the inset keyword do?
- Inset moves the shadow inside the element rather than outside. This is useful for creating pressed or recessed UI effects.
- Can I use multiple shadows?
- Yes. CSS box-shadow accepts a comma-separated list of shadow definitions. Each layer is independent and they are composited back-to-front.
- Is the output cross-browser compatible?
- The box-shadow property is fully supported in all modern browsers without vendor prefixes. No -webkit- or -moz- prefix is needed.