Put it to work
Set a 32 px blur and 12 px Y offset for a soft panel shadow.
From input to output
- Open CSS generator and load the example.
- Read the format notes, choose your options, and replace the example with your input. Start with test data instead of sensitive information.
- Run the tool and inspect the result and status. If an error appears, correct the input format and run it again.
- Copy the output or download a file. Generated and converted results are not saved automatically.
The four lengths in a box shadow
The four box-shadow lengths are X offset, Y offset, blur radius, and spread radius. Negative spread shrinks the shadow’s initial shape; blur softens its edges. Shadows do not affect layout size and may be clipped by a parent with overflow: hidden. Rename the generated selector to apply it. If using a shadow for keyboard focus, retain sufficient contrast and a clearly visible outline.
Example input
X: 0 · Y: 12 · Blur: 32 · Spread: 0 Color: #000000 · Opacity: 25%
Reading the result
.panel {
box-shadow: 0px 12px 32px 0px rgb(0 0 0 / 0.25);
}Details that matter
Format and meaning
A 0deg gradient runs bottom to top. A 90deg gradient runs left to right.
Using it correctly
Test CSS on your actual background; shadows and colors depend on surrounding contrast.
Supported scope and limits
Standard CSS box-shadow, linear-gradient, and repeating backgrounds
Split inputs that exceed the limit. If a format or algorithm is unsupported, choose a tool that matches your requirements instead of silently changing the format.
What happens to your data?
Tools run in your browser. DNS lookup sends the queried domain to the named external provider. Ads may appear on home, guide, and workspace pages according to settings.
Open tool