DevUtilX

CSS Box Shadow Generator

Build and preview `box-shadow` rules — change color, offsets, blur, spread, inset, and copy ready-to-use CSS.

0.18
0px
8px
18px
0px
Toggle inset shadow
Smooth, subtle elevation.
box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.18);
Preview

Presets

Soft Shadow
Smooth, subtle elevation.
Heavy Shadow
Deep, dramatic shadow.
Neon Glow
Colored glow effect.
Elevated Card
Common card shadow.
Layered Soft
Two subtle layers for realism.
Lift
Lifted element look.
Flat Shadow
Minimal subtle shadow.
Inset Soft
Soft inset for depth.
Long Shadow
Flat long shadow effect.
Floating
Floating card look.

💡 Want a custom shadow or assistance? Request a custom shadow

Generated CSS

Copy the generated CSS to use the shadow in your project. The snippet uses variables for color and opacity for easy tweaking.
:root {
  --shadow-color: #000000;
  --shadow-rgb: 0, 0, 0;
  --shadow-opacity: 0.18;
}

/* Example selector */
.your-element {
  box-shadow: 0px 6px 18px 0px rgba(var(--shadow-rgb), var(--shadow-opacity)), var(--shadow-opacity));
}

How to use the Box Shadow Generator

  1. Adjust the color and opacity of the shadow using the color picker and slider.
  2. Change offsets (X/Y), blur and spread to shape the shadow.
  3. Toggle Inset for inner shadows.
  4. Pick a preset for quick results or use the custom controls for precise tuning.
  5. Click Copy CSS to copy the ready-to-use snippet to your clipboard.

What is a Box Shadow Generator?

A Box Shadow Generator helps you create CSS `box-shadow` rules visually — tweak offsets, blur, spread, color and inset to quickly get the look you want without manually guessing values.

Why use our Box Shadow Generator?

  • Speed: Visual tweaking is faster than hand-editing numbers.
  • Reusable: The snippet uses CSS variables for easy theming.
  • Presets: Use the included presets as starting points.
  • No external libs: Pure CSS output ready for any project.

🚀 Explore More Free Developer Tools

Don’t stop here! Supercharge your workflow with our other powerful converters & formatters.

🎨 CSS Loaders Generator

Generate CSS loaders and spinners

🎨 CSS Border Radius Generator

Generate CSS Border Radius

🎨 CSS Backgrount Patterns Generator

CSS Backgrount Patterns Generator

💡 New tools are added regularly — bookmark DevUtilsX and stay ahead!

Want to support my work?

Buy me a coffee