Box Shadow Generator
Design CSS box shadows visually. Tune offset, blur, spread and color, toggle inset shadows, preview live and copy the CSS. Free and private.
All processing happens locally in your browser. Files are never uploaded.
Generated CSS
box-shadow: 0px 8px 24px 0px #6366f1;
Introduction
Box Shadow Generator helps you craft the perfect drop shadow for cards, buttons and panels. Slide the offset, blur and spread values, pick a shadow color, switch between outer and inset shadows, and watch the sample box update in real time. Copy the finished box-shadow declaration into your stylesheet.
Features
- Adjust horizontal and vertical offset
- Control blur radius from 0 to 200px
- Tune spread distance
- Pick any shadow color
- Toggle inner (inset) shadows
- Copy ready-to-use CSS
How to use
- 1Move the offset X and Y sliders to position the shadow.
- 2Adjust blur and spread to soften or extend it.
- 3Choose a shadow color and toggle Inset for an inner shadow.
- 4Copy the generated box-shadow CSS declaration.
Frequently asked questions
Related tools
CSS Gradient Generator
Build beautiful linear and radial CSS gradients. Add color stops, tune the angle, preview live and copy the ready-to-use CSS. Free, private, browser-based.
Border Radius Generator
Round corners visually with independent controls for all four corners. Use pixels or percent, preview live and copy the border-radius CSS. Free.
Color Picker
Pick colors with a native color wheel and instantly convert between HEX, RGB and HSL. Copy any value with one click. Free, private, runs in your browser.