HomeToolsBox Shadow Generator

Box Shadow Generator

Visually generate CSS box-shadows

0px
10px
20px
-5px
0.3
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.3);

Use these tools directly in Chrome

Install the DailyDevTools extension — access all tools from your browser toolbar

Add to Chrome

What is Box Shadow Generator?

CSS box shadows add depth and elevation to UI elements but the syntax (offset-x, offset-y, blur-radius, spread-radius, color) is hard to write from memory. DailyDevTools' CSS Box Shadow Generator provides a visual editor with live preview — adjust each parameter with sliders, add multiple layered shadows, pick colors with opacity, and copy the exact CSS property ready to paste into your stylesheet.

How to use Box Shadow Generator

  1. 1Adjust the horizontal offset, vertical offset, blur radius, and spread radius using the sliders
  2. 2Click the color swatch to choose the shadow color and opacity
  3. 3Toggle Inset to create an inner shadow effect instead of an outer drop shadow
  4. 4Click Add Layer to add multiple stacked shadows for more complex effects, then Copy CSS

Frequently asked questions

Comments

You might also like

Explore other popular developer tools

CSS Minifier

Minify and optimize your CSS code

Color Converter

Convert Hex, RGB, HSL and CMYK

Gradient Generator

Create beautiful CSS gradients

Image Compressor

Compress images locally & privately