CSS Box Shadow Generator

All tools
CSS Box Shadow Generator
Craft layered CSS box-shadows with live sliders for offset, blur, spread, color, opacity and inset — preview on a real element and copy ready-to-paste CSS instantly.
Live preview
Live preview
CSS
box-shadow: —;

Everything updates live in your browser — no uploads, no sign-up, completely free.

Shadow layers
px
px
px
px
Shadow color
20%
Element & canvas
16px
Presets
Share this
Related Tools
Email Signature Builder

Design a professional HTML email signature from 30 templates, customise it and save it.
Code Formatter

Beautify HTML, CSS and JavaScript — re-indent and add line breaks to make messy or minified code readable.
QR Code Generator

Create a QR code (URL, text, Wi-Fi, vCard…) as a PNG.
Icon to PNG

Convert Bootstrap Icons, Font Awesome and more into custom PNG images — free, in your browser.
App Icon Generator

Generate a complete, store-ready app icon set for the App Store and Google Play — premium gradient, mesh and pattern backgrounds, built from your logo.
Favicon Generator

Build a complete favicon package from a logo, a font icon or a monogram — favicon.ico, modern PNGs, the Apple touch icon, PWA icons, a web manifest and the HTML snippet.
Popular searches
css box shadow generator box shadow css shadow generator online css shadow maker layered box shadow inset shadow css

Add this free tool to your own website — copy and paste the code below.