CSS Box Shadow Generator
Design CSS shadows with multiple layers. Per-layer offset, blur, spread, color and opacity controls.
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.40);
Built by
Miguel Ángel Colorado Marin
Built by
Miguel Ángel Colorado Marin
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
How to create CSS shadows
- 1
Choose a preset or configure from scratch
Soft, Hard, Neon, Inset and 3D as starting points. Or adjust the sliders directly.
- 2
Control each layer individually
Offset X/Y for direction, blur for softness, spread for size, color with opacity and inset for inner shadows.
- 3
Add layers for complex effects
Up to 6 simultaneous layers. Combine them for neon glow, 3D shadows or advanced depth effects.
- 4
Copy the CSS and paste it into your project
The box-shadow code is generated in real time. One click to copy it.
Advanced box-shadow techniques
The CSS box-shadow property is more versatile than it appears. Combining multiple layers you can create effects ranging from soft, realistic shadows to neon glow, 3D shadows, simulated borders without using the border property, or even complex images using only box-shadow on an empty element.
The neon glow trick involves stacking two shadows of the same color: one with low blur and high spread for the bright core, and another with large blur and lower opacity for the diffuse halo. The 3D effect is achieved with a dark shadow at the corner opposite the light source and a light shadow (or white with inset) at the light source corner.
Frequently asked questions
What is the CSS box-shadow property?
Adds one or more shadows to an element. Accepts offset X/Y, blur, spread, color and the inset keyword. Multiple shadows can be chained separated by commas.
Can I add multiple shadows to the same element?
Yes. They are chained separated by commas: box-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(167,139,250,0.5). This generator produces that code automatically.
What is the difference between box-shadow and drop-shadow?
box-shadow affects the element's bounding box (with border-radius). filter: drop-shadow() follows the actual content shape, including PNG transparencies.
What does inset mean?
Converts the shadow from exterior to interior. The shadow appears inside the element's border, creating a sunken effect. Useful for inputs and inverted depth effects.
Do CSS shadows affect performance?
They have a rendering cost. For animations it is better to use will-change: box-shadow or animate opacity of a pseudo-element with a predefined shadow.
Related tools
Embed this tool
<iframe src="https://miguelacm.es/embed/css-box-shadow" width="100%" height="700" style="border:none;border-radius:16px;" loading="lazy"></iframe>