CSS Box Shadow Generator
Paste a box-shadow value, stack layers visually, and copy CSS, Tailwind, or Bootstrap. Multi-layer and inset supported. Shareable URL. Generated in your browser — never sent.
Developer notes
• Parser accepts rgba/hex/hsl/named colors; calc(), var(), oklch(), and color-mix() are rejected in v1. • layerMode single exports only layer 1 while preserving a multi-layer paste in memory until you switch back — the editor shows a hint. • rem export uses a 16px root; preview always renders in px. • Preview shape and background are URL state, not exposed options. • Tailwind nearest matching uses the v4 --shadow-* scale, same layer count, ±1px.
Options
- Layer mode — Single layer keeps the UI focused on one shadow. Multi-layer unlocks add, remove, reorder, and up to eight stacked shadows.
- Export format — Clipboard payload: CSS declaration, --shadow-card custom property, Tailwind class/token, or Bootstrap shadow utility with inline style fallback.
- Unit — Suffix on exported numeric lengths: px (DevTools default) or rem (16px root) for design-system tokens.
- Tailwind mapping — When exporting Tailwind: nearest shadow-* utility with shadow-[…] fallback, arbitrary only, or an @theme token block.
Related CSS tools
Hub: Color & CSS Tools. Round corners with CSS Border Radius Generator, convert colors with Color Converter, or format CSS with Minify CSS.
CSS Box Shadow Generator FAQ
Paste-local layered shadow editor
Can I paste a multi-layer box-shadow from DevTools?
Yes. Paste comma-separated layers with inset, rgba(), or hex colors. More than eight layers are truncated with a notice.
What does single-layer mode do?
It hides add/remove/reorder controls and exports only the first layer. Extra pasted layers stay in memory — switch back to multi-layer to edit them.
How does Tailwind export work?
Choose nearest utility + arbitrary fallback, arbitrary only, or an @theme --shadow-card block plus shadow-card utility.
Is my CSS uploaded anywhere?
No. Parsing and preview run entirely in your browser.
Color & CSS Tools
Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.
Explore other tool categories
Minify
Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.
Unminify
Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.
Conversion
Transform data between JSON, YAML, XML and CSV locally — no server uploads.
Encoding
Encode or decode Base64, URL components and HTML entities — client-side only.
Serialization
Serialize and deserialize PHP data structures beside JSON workflows.
JSON Tools
Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.
SVG Tools
Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.
Beautify
Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.
CSS preprocessors
Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.
DevOps & Infra
Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.
CI/CD
GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.
Logs & observability
Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.
Kubernetes
Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.
Networking / IP
CIDR, subnets, and IPv4/IPv6 helpers — in your browser.
Security & tokens
JWKS, X.509 certificates, and secrets scan — browser-local.
API & schemas
OpenAPI tools to format, validate, and lint your specs.
HTTP Tools
Paste-local cURL, HTTP messages, URLs, HAR files, and Cookie / Set-Cookie headers — format and inspect in your browser, never sent.
SEO / Web Tools
Generate meta tags, Open Graph, and Twitter Card output locally — previews simulated from your inputs, never fetched from your live site.
Developer utilities
Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.
Text & Markdown
Count words, build Markdown TOCs, and clean line lists — all in your browser.
AI & LLM
Token counting, pricing estimates, and context-window fit — 100% browser-local.
Test Data
Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.
Barcode labels
Draw Code 128, EAN-13, and UPC-A label images in the browser — PNG and SVG download, not a GS1 lookup.