Box Shadow Generator
Design CSS box-shadows visually and copy the exact code.
Box Shadow Generator
The CSS box shadow generator lets you design shadows visually and copy the exact code, without memorizing the box-shadow syntax. Adjust the controls for horizontal and vertical offset, blur radius, spread, and color, and a live preview updates as you go. When the shadow looks right, copy the generated CSS straight into your stylesheet. It is the fastest way to get from an idea to production-ready shadow code.
How it works
Everything runs locally in your browser. As you change each value, the tool renders a real element with your shadow applied and rebuilds the box-shadow declaration on the fly, so what you see in the preview is exactly what you copy. There is no processing on a server, so it responds instantly, works offline after loading, and runs the same on desktop and mobile.
How to use it
- Set the horizontal and vertical offset to place the shadow.
- Adjust blur and spread to control softness and size.
- Pick a shadow color and opacity to match your design.
- Copy the generated CSS into your stylesheet or component.
Polishing a UI? Combine it with the CSS Gradient Generator, grab exact values from the Color Picker & Palette, or translate formats with the Color Converter.
Private by design
Your shadow settings stay in your browser and are never uploaded. The tool is free, needs no account, and runs entirely client-side, so nothing you design is stored or shared.
Frequently asked questions
It generates a standard box-shadow declaration you can paste directly into your CSS, built from the offset, blur, spread, and color values you set.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview.
Color Picker & Palette
Pick a color, get every format, and generate tints, shades and palettes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA standards.
Meta Tag Generator
Generate SEO, Open Graph and Twitter meta tags from a simple form.