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.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.
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.