CSS Shadow Generator — box-shadow & glassmorphism
The CSS shadow generator lets you dial in a beautiful box-shadow with sliders, or generate a trendy glassmorphism effect in one click — live preview, and one-click copy of paste-ready CSS. Shape Cat is pure front-end with no framework needed.
CSS Shadow Generator is a free online tool from Shape Cat that runs entirely in your browser - open it, do it, and download the result. Nothing is uploaded, there's no sign-up and no limits.
box-shadow: 0px 10px 25px -5px rgba(27, 27, 31, 0.2);
Pure CSS, live preview — copy and paste.
How to use css shadow generator
- 1Pick a mode: box-shadow or glassmorphism.
- 2Drag the sliders for offset, blur, spread, color, opacity and more.
- 3Watch the live preview.
- 4Hit Copy CSS and paste it into your stylesheet.
Why use Shape Cat's CSS Shadow Generator?
- WYSIWYG: the preview updates as you drag — no trial and error.
- Two effects: classic shadow plus trendy glassmorphism in one tool.
- Copy-and-go: standard CSS (with -webkit prefix) that works on paste.
Frequently asked questions
Why isn't my glassmorphism blurring?
Glassmorphism relies on backdrop-filter, which needs content behind the element to blur and isn't supported in some older browsers. The generated CSS includes the -webkit-backdrop-filter prefix for wider support.
What does the inset option do?
Inset draws the shadow inside the element — handy for recessed looks, input focus and pressed states; unchecked gives a normal outer shadow.
Can I use this in Tailwind?
Yes. Put the box-shadow value into your Tailwind boxShadow config, or use an arbitrary value like shadow-[...] directly in a class.
How is this different from other online box-shadow generators?
Most older generators only do classic drop shadows, look dated and run ads. Shape Cat covers both classic shadows and trendy glassmorphism (with the -webkit prefix) in one tool, with a live preview and copy-and-go output — pure front-end, no ads, no tracking. For quickly grabbing a modern, paste-ready shadow, Shape Cat is the smoother pick.
Related CSS changes
Browser support notes near this tool
Updated · shape cat team
Sources, review and limits
Last verified
2026-06-17
Author
Shape Cat editorial desk
Reviewer
Brand asset review
Primary sources
- Browser Canvas and SVG export APIs
- Color and typography heuristics maintained in the site tools
- User-entered brand names, colors and prompts
Brand kits are creative starting points, not trademark, accessibility or brand-strategy advice. Test contrast, licensing and legal clearance before launch.