CSS Box Shadow Generator
Build layered CSS box shadows with a live preview. Tune offsets, blur, spread, color and inset layers, then copy CSS, SCSS, Tailwind or JavaScript output.
Build layered CSS box shadows with a live preview. Tune offsets, blur, spread, color and inset layers, then copy CSS, SCSS, Tailwind or JavaScript output.
- Prepare your input
Choose the relevant options using the controls below.
- Run your task
Adjust the controls below and inspect the preview.
- Use the result
Check the result, then use the available copy or download controls.
Pixel-based shadows with CSS, SCSS, Tailwind class and JavaScript exports. Color variables need definitions in your target page. Tailwind output follows arbitrary-value syntax; check it in your target project.
Generated Code
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
Shadow Controls
Preview Settings
Live Preview
Shadow Presets
Subtle Shadows
Medium Shadows
Strong Shadows
Material Design
Neumorphic
CSS Box Shadow Generator
Compose one or more box-shadow layers while seeing the effect on a square, rounded or circular preview. Adjust horizontal and vertical offsets, blur, spread, RGBA color, visibility and inset mode, then reorder or remove layers. Presets cover subtle, medium, strong, Material-style and neumorphic examples.
Copy the generated value as CSS, SCSS, a Tailwind arbitrary shadow or a JavaScript object. Tailwind output is a custom value and may require project configuration; color variables must exist in the page where you paste the result. The preview demonstrates the shadow, not the contrast or elevation of your final component.
Features
- Edit layered offset, blur, spread, RGBA color, visibility and inset settings.
- Preview square, rounded or circular surfaces in a chosen size and background.
- Start from subtle, Material-style or neumorphic presets and reorder layers.
- Copy CSS, SCSS, Tailwind or JavaScript output.
How to use
- Choose a preset or set the active layer’s offsets, blur, spread and color.
- Switch inset or visibility and add layers when the effect needs more than one shadow.
- Reorder layers and check the live preview against the intended surface.
- Choose an output format and copy it; define any variables or Tailwind configuration in your project.