Visual CSS box-shadow generator: sliders for offset/blur/spread/opacity, live preview, one-click copy. Custom colors and inset support.
TL;DR: Visual box-shadow generator: sliders, live preview, one-click copy, inset supported.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Usage Guide
CSS box-shadow has six parameters that combine differently every time — hand-tuning the perfect shadow without preview is blind iteration. This tool provides a visual parameter panel: X/Y offsets, blur, spread, color, inner shadow, with live preview and generated CSS code, local rendering.
1. How to use
- Tune parameters in the panel: horizontal offset (side position), vertical offset (up/down), blur radius, spread radius, color and opacity.
- Enable inner shadow to render the shadow inward — suits card-inset effects.
- Copy the generated box-shadow CSS and paste into your stylesheet.
2. Understanding the parameters
- Offsets set light direction: negative horizontal + positive vertical (e.g. -2px 3px) simulates upper-left lighting.
- Blur radius controls hardness: 0 is a hard-edged rectangle, 20px is a soft glow — tied to design style.
- Spread grows the shadow when positive, shrinks when negative (negative spread = shadow smaller than the element).
- Stacking layers: comma-separate multiple box-shadow declarations for borders, glows and composite effects.
3. Shadow depth rules
Real UI shadows follow near/far optics: distant light sources produce soft large shadows; close light produces sharp small ones. Design systems commonly use three tiers — base (offset 0 1px 2px, very subtle, for cards), mid (0 4px 8px, hover states), and float (0 16px 24px, dialogs/popovers). This is more consistent than arbitrary tuning. After generating, double-check that elements designed without shadows (like sticker-style cards) also disable box-shadow, keeping the design language coherent.
FAQ
Comma-separate them: box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.15); — layering creates depth. This tool emits one layer; combine manually.
Inner shadow — drawn inside the element; common for input focus or pressed states. Toggle it to compare.
Three usual causes: opacity 0, blur and offset both 0, or clipped by a parent with overflow hidden. Increase blur to diagnose.
The final impression depends on the background and the border-radius: the same shadow reads very differently on dark and light backgrounds and around different corner radii. After copying the CSS, check it in the real page against both a dark and a light background before committing.
Softer, yes — but oversized blurs carry real rendering cost on low-end devices, so go easy on them in scroll-heavy and animated areas. Also avoid expressing the same edge twice with an inset shadow and a border together.
Related Tools
Related Articles
TOTP Two-Factor Authentication Guide: otpauth URI, Algorithms, and Local Debugging
How RFC 6238 TOTP works: algorithms, digits, period, otpauth URIs, countdown windows, and debugging 2FA with a browser-local generator.
Mock Data Generator Complete Guide: Generate Test Data Fast
Generate reproducible test rows with field types, locale samples, and seeds. Export JSON, CSV, TSV, YAML, or SQL for frontend mocks and local DB seeding.
Online JWT Generator/Decoder: JSON Web Token Tool
Learn JWT (JSON Web Token) structure, how it works, and use cases. Mint and decode JWTs with a local browser tool, plus practical signing hygiene.