Developer tool · Free · No sign-up
CSS Box-Shadow Generator
Visually design perfect box shadows and copy the CSS instantly.
Live Preview
Configuration
CSS Code
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);
About this tool
Getting the perfect box-shadow in CSS is notoriously tedious. Mathematically guessing blur radius, spread, and opacity can take dozens of refreshes. This interactive tool lets you visually drag sliders for offset, blur, spread, and color opacity, giving you an instant live preview alongside the exact CSS code you need to copy into your project.
Key features
Live Visual Preview
See your shadow render on a sample card in real-time as you adjust sliders.
Full Property Control
Adjust X/Y offset, blur, spread, color, and opacity independently.
Inset Support
Easily toggle between standard drop-shadows and inner inset shadows.
How to use it
- 1Use the sliders to set the X and Y offsets.
- 2Adjust the Blur and Spread radius sliders.
- 3Pick a shadow color and adjust its opacity.
- 4Toggle 'Inset' if you want an inner shadow.
- 5Click copy to grab the generated CSS code.
Common use cases
- Designing depth and elevation for Material UI components.
- Creating smooth, multi-layered hover effects for buttons.
- Visualizing how light affects a card's appearance before writing code.
Frequently asked questions
Can I use multiple shadows?
This tool generates a single, clean shadow layer. For multiple layers, you can copy the generated code and separate additional layers with commas in your CSS file.
Does it support RGB and HSL?
Currently, the color picker outputs an RGBA string (e.g., rgba(0,0,0,0.2)), which is the most widely supported format for CSS opacity.
Why use negative spread?
A negative spread radius shrinks the shadow, making it tighter than the element itself. This is a common trick to create soft, realistic drop-shadows that don't extend too far out.
Private and free. Most of our tools run entirely in your browser, so the data you enter isn't uploaded or stored. There's no sign-up, and there never will be — they're built by the Fusion Trail Solutions team to be genuinely useful.
Need a custom tool or web app?
We design and build production-grade web apps, internal tools and SaaS platforms. Tell us what you need.
Popular searches
More free tools
View all →Currency Converter
Convert between 160+ world currencies with live exchange rates.
Open toolPaletteSnap
Extract beautiful color palettes from any website screenshot.
Open toolDiet Roadmap Planner
Calculate your macros and project your weight goals over time.
Open toolWebsite Color Extractor
Instantly extract the dominant color palette from any website URL.
Open toolProject Cost Estimator
Calculate the estimated cost and timeline to build your custom software.
Open toolSaaS Pricing Page Generator
Build beautiful pricing tables and copy the HTML/Tailwind code.
Open tool