Box Shadow Generator
Generators & QR · Done in 3 steps
- 1Start from a preset
- 2
- 3
About
Build layered CSS box-shadows visually with offset, blur, spread, opacity and inset, plus presets from subtle to neumorphic. Copy the CSS.
How to use it
- 1Start from a preset or the default soft shadow.
- 2Select a layer and adjust offset, blur, spread, colour and opacity.
- 3Add more layers for realistic depth, or tick Inset for an inner shadow.
- 4Copy the box-shadow CSS.
- You give
- One or more shadow layers
- You get
- CSS box-shadow declaration with a live preview
- Good to know
- Shadows are previewed on a simple box. Very large blur values on many elements can affect scrolling performance on low-end phones.
- Privacy
- Processed on your device. Nothing is uploaded, stored or logged.
- Last tested
- 2026-10-28
FAQ
Why use more than one layer?
Real shadows have a sharp contact shadow and a soft ambient one. Stacking a small tight layer with a larger faint layer looks far more natural than a single heavy shadow.
Go further with AI
Content calendar workflow
Plan a month of content from goals and pillars, with formats per channel, a realistic cadence and a production schedule you can actually keep.
ChatGPT · Claude · Gemini
Customer interview synthesis
Turn interview transcripts into evidence-backed themes, jobs-to-be-done statements and opportunities, with quotes and counts rather than vibes.
Claude · ChatGPT · Gemini
Competitor comparison worksheet
Compare competitors on criteria buyers actually use, with evidence for every cell and an honest view of where you win and lose.
ChatGPT · Claude · Gemini
Landing page critique
Get a prioritised, conversion-focused critique of a landing page's copy and structure, judged from the point of view of the visitor you're paying for.
ChatGPT · Claude · Gemini