Jack Tools

Box Shadow Generator

Create custom CSS box shadows with live preview, presets, and copy-ready code.

Build your shadow

0px
18px
40px
0px
22%
Inset shadow Turn on to place the shadow inside the box instead of outside it.

Use this for cards, buttons, modals, panels, images, and interface elements that need more depth.

Live box shadow preview
CSS box-shadow
0px 18px 40px 0px rgba(0, 0, 0, 0.22)
Shadow colour
#000000
RGBA
rgba(0, 0, 0, 0.22)
Offset
0px 18px
Type
Outer shadow

How this box shadow generator works

This box shadow generator helps you build CSS shadows for cards, buttons, panels, modals, images, and other interface elements. You can control the horizontal offset, vertical offset, blur, spread, opacity, colour, and whether the shadow sits outside or inside the element.

It is useful for web design, app interfaces, landing pages, dashboard UI, and any visual layout where you want to add depth, separation, or focus.

The tool generates a live preview and a copy-ready CSS box-shadow value. Small changes can make a box feel softer, stronger, flatter, more elevated, or more pressed into the surface.

Offset controls Move the shadow left, right, up, or down to change the apparent light direction.
Blur and spread Adjust the softness and footprint of the shadow for subtle or dramatic depth.
Inset mode Create inner shadows for pressed buttons, inputs, and surface depth effects.
Copy-ready CSS Use the generated box-shadow value directly in websites, apps, and design systems.
Back to calculator ↑

Example box shadow styles

Soft card shadow
Offset0px 10px
Blur30px
Opacity15%
Great for clean card UI
Deeper modal shadow
Offset0px 24px
Blur60px
Opacity28%
Ideal for modals and pop-ups
Glow effect
Offset0px 0px
Blur40px
ColourBlue
Useful for highlights and emphasis
Inset field shadow
TypeInset
Offset0px 8px
Blur20px
Works well for inputs and pressed UI

Box Shadow Generator FAQs

It helps you create CSS box shadows by adjusting offset, blur, spread, opacity, colour, and inset settings, then shows the result in a live preview and gives you copy-ready CSS.
A box shadow is a visual effect that adds depth around or inside an element. It is commonly used on cards, buttons, images, forms, panels, and pop-ups to help them stand out.
Blur softens the edges of the shadow. Lower blur makes the shadow feel tighter and sharper, while higher blur creates a softer and more diffused look.
Spread changes the size of the shadow area before blur is applied. Positive spread makes the shadow larger, while negative spread pulls it inward for a tighter effect.
An inset shadow appears inside the element instead of outside it. This is useful for creating pressed buttons, input depth, or inner shading effects.
Yes. It is useful for buttons, cards, modals, menus, input fields, images, banners, and many other interface components where depth helps improve visual hierarchy.
Yes. The generator gives you a CSS box-shadow value that you can copy directly into websites, apps, components, templates, and design systems.
It is accurate for CSS shadow generation and live visual preview in normal design use. Final appearance can still vary slightly depending on background colour, screen settings, and surrounding layout context.

Related tools

Gradient Generator Combine shadows with backgrounds and gradients. Colour Picker & Palette Generator Choose colours that match your box shadow styling. Contrast Checker Check interface readability after visual styling changes.