CSS Box Shadow Generator
Create CSS shadows visually with real-time preview.
0 of 3 uses today · 3 remaining. Go Pro and remove the limit.
Live Preview
box-shadow: 0px 30px 60px -15px #4f46e566;Layers (1/6)
§ How to use
How to generate a CSS box-shadow visually
Create shadows of any depth (subtle to dramatic) with a live preview and copy-ready code.
Set the offsets
X (horizontal), Y (vertical), Blur (softness) and Spread (thickness). Drag the sliders for instant visual feedback.
Pick the shadow color
Default is black at low opacity (a natural shadow). For a colored 'glow', choose your brand color.
Stack multiple layers (optional)
Professional shadows use 2-3 layers (a close shadow plus an ambient one). Stack them for real depth.
Copy the CSS
Ready to paste. Includes an optional inset (inner shadow) and cross-browser prefixes.
Related
Related tools
Da mesma categoria.
SVG to React Converter
Paste your dirty SVG code and get an optimized React Component ready and formatted for the modern web.
Regex Tester
Validate your regular expressions with dynamic highlights.
Markdown Table Editor
Create and edit Markdown tables visually with easy export.
SQL Formatter
Beautify and indent your messy SQL queries seamlessly.
JSON Formatter
Beautify, validate, and minify your JSON objects quickly.
Cron Expression Parser
Convert cron expressions to human-readable language instantly.