EverydayDevTools
CategoriesBlogFAQAboutAuthorContact
CSS Tools
Popular
Recently added

CSS Box Shadow Generator

Tune offset, blur, spread, and color to generate a box-shadow declaration you can paste into your stylesheet.

Features

  • Offset, blur, and spread sliders
  • Custom shadow color
  • Live preview
  • Copy CSS output

How to use Box Shadow

  • 1
    Adjust the sliders and color field.
  • 2
    Preview the shadow on the sample card.
  • 3
    Copy the CSS declaration.

Examples

Soft shadow

Input
4 8 24 0 rgba(0,0,0,0.24)
Output
box-shadow: 4px 8px 24px 0 rgba(0,0,0,0.24);

About Box Shadow

CSS Box Shadow Generator gives you interactive sliders and a live preview for crafting box-shadow CSS without guessing pixel values.

Frequently asked questions

This version generates a single shadow layer. You can combine copied values manually.

Not yet - output is an outset box-shadow.

No.

Related tools

CSS Tools
Popular
New

CSS Gradient Generator

Create linear-gradient CSS from two colors and a direction.

Open tool →
Color Tools
Popular
New

Color Picker

Pick a color visually and copy its HEX value instantly.

Open tool →
Color Tools
Popular
New

HEX to RGB Converter

Convert colors between HEX and RGB with a live preview swatch.

Open tool →