USEFUL TOOLS. LESS HASSLE.Offset, Blur and Spread
Five sliders give precise control over every part of the shadow.
DESIGN TOOL / CSS
Free CSS Box Shadow Generator
Create CSS box shadows visually with a live preview. Adjust offset, blur, spread, color and opacity, stack up to four layers and copy the code.
Includes inset shadows and background controls so you can judge the effect in context.
✓ Free to use · No signup required · Processed in your browser
Box Shadow Generator workspace
ADJUST THE SLIDERS · SEE THE PREVIEW · COPY THE CSS
Box
Preview
Drag the sliders — the shadow and CSS update live.
BOX SHADOW WORKSPACEMOSANKIT / DESIGN & COLOR
THE BASICS
What Is a Box Shadow?
The CSS box-shadow property draws a shadow behind (or inside) an element. It is used to lift cards off the page, give buttons depth, and create subtle borders. A shadow is defined by its horizontal and vertical offset, its blur, its spread and its color.
Realistic shadows often layer several soft shadows together rather than using one hard one — which is why this generator supports multiple layers.
BUILT FOR THE JOB
Key Features of MoSanKit Box Shadow Generator
Color and Opacity
Choose any shadow color and set how transparent it is.
Up to 4 Layers
Stack shadows for soft, realistic depth.
Inset Shadows
Switch a layer to an inner shadow for pressed or recessed looks.
Live Preview
Change the box color, background and corner radius to test in context.
Copy-Ready CSS
A clean box-shadow declaration, ready to paste.
QUICK AND SIMPLE
How to Create a Box Shadow
01 / ADJUST
Adjust the sliders
Set the offset, blur, spread and opacity.
02 / STYLE
Choose a color
Soft, low-opacity shadows usually look best.
03 / LAYERS
Add layers (optional)
Combine shadows for realistic depth.
04 / COPY
Copy the CSS
Paste it into your stylesheet.
MADE FOR EVERYDAY WORK
Who Can Use This Tool?
Web DesignersDesign cards and buttons with depth.
Front-end DevelopersGenerate precise shadow code.
UI DesignersPrototype elevation levels.
BloggersStyle images and callouts.
StudentsLearn box-shadow syntax visually.
Product TeamsStandardise shadow styles.
GOOD TO KNOW
A few things, answered.
Quick answers about using the MoSanKit Box Shadow Generator.
In order: horizontal offset, vertical offset, blur radius, spread radius and color. An optional inset keyword puts the shadow inside the box.
Spread makes the shadow bigger (positive) or smaller (negative) than the box before blurring. Negative spread with a positive offset gives a tight, modern shadow.
Use low opacity (5–20%), a larger blur and a small vertical offset. Layering two or three soft shadows looks more natural than one heavy one.
Yes, up to four layers. They are written as a comma-separated list in the CSS.
No. Shadows are drawn outside the layout flow and do not push other elements around.
No. The CSS is generated in your browser.
Give your design
some depth.
Explore more free design and color tools from MoSanKit.