CSS Box Shadow Generator
Generate CSS box-shadow with intuitive sliders. Presets and CSS code export.
Presets
Shadow layers
Preview
Generated CSS code
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
Everything about the CSS box-shadow generator
Why use this box-shadow generator?
The CSS box-shadow property adds shadows to any HTML element, but its syntax with 6 parameters (X/Y offset, blur, spread, color, inset) is hard to memorize and manually adjust.
Our generator offers intuitive sliders with real-time preview. Try presets (subtle, medium, strong, inset, neon) and copy the CSS code in one click.
Runs entirely in your browser. No data is sent. Perfect for rapid prototyping and design experimentation.
Who uses this generator?
- Front-end developers
- Quickly generate clean CSS shadows without manually tweaking values.
- UI/UX designers
- Visually experiment with different shadow styles for your mockups and design systems.
- Beginner developers
- Learn box-shadow syntax interactively by seeing each parameter's effect in real time.
- Freelancers and agencies
- Save time on visual adjustments and copy CSS code directly into your projects.
How to generate a CSS shadow
Adjust sliders for horizontal offset (X), vertical offset (Y), blur radius, and spread.
Choose the shadow color and opacity. Enable the inset option for an inner shadow.
Copy the generated CSS code and paste it directly into your stylesheet.
Frequently asked questions
- What is the CSS box-shadow property?
- box-shadow is a CSS property that adds one or more drop shadows around an HTML element. Its syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. It's supported by all modern browsers without prefixes.
- What's the difference between blur and spread?
- Blur makes shadow edges gradual: higher values create a more diffuse shadow. Spread enlarges or reduces the shadow size: positive values expand it, negative values shrink it. Combined, they enable highly varied effects.
- What is an inset shadow?
- The inset keyword turns the outer shadow into an inner shadow, projected inside the element. It creates a recessed effect useful for form fields, pressed buttons, or depth effects.
- Can you add multiple shadows to one element?
- Yes. In CSS, combine multiple shadows separated by commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Multiple shadows create more realistic depth effects.
- Do box-shadows affect performance?
- CSS shadows require rendering recalculation, which can affect performance on animated or numerous elements. For animations, prefer filter: drop-shadow() or shadows with moderate blur values. On static elements, the impact is negligible.
Understanding CSS shadows
How do CSS shadows work?
CSS offers two shadow properties: box-shadow for box elements and text-shadow for text. box-shadow draws a shadow following the element's rectangular shape (including border-radius). The browser calculates the shadow by applying an offset, Gaussian blur, and spread. The shadow renders below the element (or inside with inset) and respects stacking order (z-index).
What are best practices for shadows in web design?
Best practices recommend using subtle shadows with semi-transparent colors (rgba or hsla) rather than pure black. Combine multiple shadows of different sizes for a natural effect. Stay consistent with light direction across the page. Use stronger shadows for elevated elements (modals, dropdowns) and subtle ones for surface-level elements (cards, buttons).
What's the difference between box-shadow and filter: drop-shadow()?
box-shadow draws a shadow around the element's rectangular box, while filter: drop-shadow() follows the element's actual shape (including transparent areas of PNG images). drop-shadow is more performant for animations using GPU acceleration, but doesn't support multiple shadows or spread. box-shadow offers more control.