Guides JP

CSS Box Shadow Generator

A free tool to build CSS box-shadow intuitively with sliders. Adjust X/Y offset, blur, spread, color, opacity and inset, and stack as many shadow layers as you like. Preview instantly and copy the generated CSS with one click. Everything runs in your browser.

Last updated: 2026/10/16 Design Feedback & bug reports
Preview
Presets
Shadows (layers)
Generated CSS

How to Use

1

Adjust the shadow

Move the sliders for horizontal/vertical offset, blur, spread, color and opacity to shape the shadow. Turn on inset for an inner shadow.

2

Stack layers

Use "Add layer" to stack as many shadows as you want, or pick a preset to apply a polished shadow in one tap.

3

Copy the CSS

Check the preview, then copy the generated box-shadow code with the "Copy CSS" button and paste it straight into your stylesheet.

About the Box Shadow Generator

A web tool that lets you build the CSS box-shadow property with sliders alone, without memorizing any numbers. Tune offset, blur, spread, color and opacity with a live preview, and stack multiple shadows for depth. Copy the generated code and use it right away in your projects. Everything runs in your browser, so you can use it with peace of mind.

Features

  • Live previewThe preview and the generated CSS update instantly as you move the sliders.
  • Multiple layersStack any number of shadows to create rich, layered depth.
  • Built-in presetsApply polished shadows like Soft, Material and Neumorphism in one tap.
  • One-click copyCopy the generated box-shadow CSS and paste it anywhere.

Use Cases

  • Add depth to cards and buttons in your UI
  • Reproduce Material Design elevation shadows
  • Build neumorphism (soft UI) shadows
  • Create inner shadows and inset effects
  • Learn how CSS box-shadow values behave

FAQ

Is the box shadow generator free to use?
Yes, it is completely free. No registration is required—just open it in your browser and start using it.
Can I stack multiple shadows?
Yes. Use the "Add layer" button to stack as many shadows as you like. Each layer has its own offset, color and opacity, and they are output as a comma-separated CSS value.
Does it support inset (inner) shadows?
Yes. Turn on "Inset shadow" for any layer to create an inner shadow that falls inside the element.
Is my data sent to a server?
No. All processing happens locally in your browser; nothing is ever sent to or stored on a server.
Can I set transparency (alpha) on the shadow color?
Yes. The opacity slider lets you set 0–100%, and the output is automatically written as an rgba() value with the alpha included, making natural-looking shadows easy.

Related Tools

px to vw Converter Convert CSS px to vw. Bulk CSS conversion supported px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported Aspect Ratio Calculator Calculate simplified aspect ratio from dimensions Line Height Calculator Calculate line-height ratio from font size and leading CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

CSS Button Design Basics: Padding, Radius, Color, Hover, Shadow, A11y Learn the basics of designing buttons with CSS: padding, border-radius, background color, hover and active states, shadows and gradients, tap-friendly size and contrast, and accessibility points such as focus indicators, all explained for beginners.