CSS Box Shadow Generator
Design a CSS box-shadow with live controls. Adjust the X and Y offset, blur, spread, color and opacity, toggle inset, then copy the generated box-shadow rule.
How to generate a CSS box shadow
- Drag the offset, blur and spread sliders to shape the shadow.
- Pick a color and set the opacity, and toggle inset for an inner shadow.
- Copy the box-shadow code from the output box into your stylesheet.
Examples
Soft card shadow
offsetX 0, offsetY 4, blur 6, spread 0, #000000, opacity 0.25
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
Inset inner shadow
offsetX 0, offsetY 2, blur 4, spread 0, #000000, opacity 0.3, inset
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
Frequently asked questions
What do offset, blur and spread control?
Offset X and Y move the shadow horizontally and vertically. Blur softens the edge, with larger values fading it out more. Spread grows the shadow when positive and shrinks it when negative.
What is an inset shadow?
Inset draws the shadow inside the element instead of behind it, which makes the box look recessed or pressed in. Toggle inset to switch between an outer and inner shadow.
Why is the color shown as rgba()?
Your hex color is combined with the opacity slider and written as rgba(), so the shadow can be partly transparent. That is how realistic shadows blend with the background.
Can I stack multiple box shadows?
Yes. CSS lets you list several shadows separated by commas on a single box-shadow property. This tool builds one layer at a time, so copy each value and join them with commas.
Do box shadows affect performance?
Static shadows are cheap, but very large blur radii and animating box-shadow can be costly to repaint. For smooth animation, prefer transitioning a shadow on a layer or use transform and opacity where possible.
Is my work sent to a server?
No. The preview and the generated code are computed entirely in your browser.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Color Contrast Checker
Check the WCAG contrast ratio between two colors. See AA and AAA pass or fail for normal and large text, with a live preview. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.
Base64 Decode
Decode Base64 to plain text online. Paste a Base64 or base64url string and get instant UTF-8 output. Free, fast and runs in your browser.