Loading…

How to use Box Shadow Generator

Adjust horizontal and vertical offset, blur, spread, color and the inset toggle, then copy the generated box-shadow CSS while watching the preview update live.

Frequently asked questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius, and color — with an optional inset keyword for inner shadows.

What does inset do?

inset draws the shadow inside the element's border instead of outside, creating a pressed or recessed appearance.

Can I stack multiple shadows?

Yes — CSS allows comma-separated box-shadow layers, letting you combine several offsets and colors for realistic depth.

More Developer Tools

Text Shadow Generator
Live CSS text-shadow preview.
Border Radius Generator
Independent corner radius controls.
Flexbox Generator
Visual flex layout + CSS code.
Grid Generator
Visual grid layout + CSS code.
Animation Generator
Generate keyframes with preview.
Meta Tags Advanced
SEO + OG + Twitter meta generator.
Slugify
Convert any text into a clean URL slug — strips accents, lowercases and joins words with a custom separator.
Case Converter (Dev)
Convert identifiers between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Title and Sentence case.
Bytes Humanizer
Turn raw byte counts into human-readable sizes in KiB/MiB (binary) or KB/MB (decimal), and parse sizes back to bytes.
Number Formatter
Format numbers with locale-aware thousands separators and fixed decimals using the Intl API — US, EU, Indian and more.
Base64URL Encoder
Encode or decode UTF-8 text to URL-safe Base64 (base64url) with no padding — ideal for JWTs and query parameters.
JWT Generator (HS256)
Sign a JSON Web Token with HMAC-SHA256 from your header, payload and secret — output verifiable against jwt.io.

← View all Developer ToolsBrowse all 1,100+ tools →