RootUtils

Box Shadow Gen

Client-Side Secure

Free online CSS Box Shadow Generator. Create beautiful, layered shadows visually. Copy the CSS code instantly for your web design projects.

Canvas Settings
Background
Object

Quick Presets

Stack
1
Drop Shadow
0x, 10y, 10% op
2
Drop Shadow
0x, 4y, 5% op
Properties
Layer 1

Offset

0
10

Blur & Spread

15
-3

Color & Style

0.10

Is this tool broken?

Let us know if you found a bug or have a feature request.

Online Box Shadow & Layered Shadow Generator

Create beautiful, multi-layered CSS box shadows instantly. Adjust horizontal/vertical offset, blur radius, spread, and color opacity to craft realistic depth for your web designs.

From Soft UI (Neumorphism) to sharp, retro outlines, RootUtils lets you stack unlimited shadow layers and export the code as standard CSS or Tailwind Arbitrary Values.

Why Stack Layers?

Real shadows are complex. They have an Umbra (darkest core), Penumbra (softer middle), and Antumbra (faintest edge). Stacking 3 layers with increasing blur creates this "ultra-realistic" effect used by Stripe and Apple.

Tailwind Ready

Don't fight with tailwind.config.js. We generate the exact JIT class you need: shadow-[0_10px_20px_rgba(0,0,0,0.2)]. Just copy and paste it into your HTML class list.

Performance Note

Shadows are expensive to render. Large blur radiuses and spread values can cause "jank" (lag) on scrolling, especially on mobile. Try to keep your blur under 50px for optimal performance.

CSS Syntax Explained

box-shadow: 10px 5px 5px 0px black;
Offset-X / Y: How far the shadow moves horizontally and vertically.
Blur Radius: How blurred the shadow edge is. 0 = sharp edge.
Spread Radius: Increases or decreases the size of the shadow shape.
Color: Standard CSS color (Hex, RGBA, HSL). Using RGBA with opacity is best.

Frequently Asked Questions

What is an "Inset" shadow?

An inset shadow is drawn inside the element's border, making the content look recessed or sunken. This is the core technique behind the "Neumorphism" (Soft UI) trend for creating pressed buttons or input fields.

Why do my shadows look dirty?

Avoid using pure black (#000000) with high opacity. In the real world, shadows are rarely black; they are darker shades of the surrounding colors. Try using a dark blue or purple with low opacity (10-20%) for a cleaner, modern look.

You might also like

Glassmorphism Gen

Free CSS Glassmorphism Generator. Create beautiful frosted glass effects for your UI. Customize blur, transparency, and color. Copy CSS instantly.

Fancy Border

Free online Fancy Border Radius. Generate organic, blob-like shapes for your CSS designs. Customizable and ready to copy-paste.

CSS Gradient Gen

Free online CSS Gradient Generator. Create stunning linear and radial gradients. Customize colors and directions. Copy CSS code instantly.