CSS Box Shadow Generator — Visual Multi-Layer Editor
Design CSS box-shadow interactively with live preview. Multiple layers (Material-style elevation, neumorphic, inset shadows), presets, and one-click copy. 100% local.
Last updated:
CommentsPresets
Layers (1)
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.25);
Frequently Asked Questions
Can I stack multiple shadows?
Yes — CSS box-shadow accepts a comma-separated list of layers and stacks them from back to front (later layers draw on top). This tool lets you add / remove layers and gives you the compiled CSS ready to paste.
What does the 'inset' checkbox do?
It moves the shadow inside the box, which is how you create pressed-button, inner-glow, or well/pit effects. Great for depicting focus states or 'pressed' buttons without JavaScript.
How is Material-style elevation achieved?
By stacking two shadows — a small, tight one for the key light plus a larger, softer one for the ambient light. The 'Card' and 'Elevated' presets show the recipe; adjust offsets and spread to match your design system.
Related Tools
cURL Converter
Convert cURL commands to Python (requests), JavaScript (fetch), Node.js, Go (net/http), PHP, or Java (HttpClient). Parses -H, -d, --data-urlencode, -F, -u, --json and more. 100% local.
URL Parser
Parse any URL into scheme, host, port, path, and query parameters — or build a URL from scratch with a form. Great for debugging redirect chains, tracking pixels, and OAuth flows. 100% local.
CIDR Calculator
Calculate IPv4 subnets from CIDR notation online. Get network address, broadcast, netmask, wildcard, usable host range, IP class, and binary representation. 100% local — nothing leaves your browser.
Color Converter
Convert colors between HEX, RGB, HSL, and HSV instantly. Includes a live color preview and copy-ready CSS strings.
Meta Tag Preview
Preview how your page will appear in Google search results and social share cards on Facebook, Twitter/X, and LinkedIn. Parses <title>, meta description, canonical, and full Open Graph / Twitter Card tags with diagnostics. 100% local.
HTML Minifier
Minify HTML by removing comments, collapsing whitespace, and stripping optional attribute quotes and void-element slashes. Reports byte savings. Preserves IE conditional comments and preformatted <pre> / <textarea> / <script> / <style> content. 100% local.