ADVERT

📦 Box Shadow

Design CSS box-shadows visually and copy the exact CSS.

Box Shadow Generator

Adjust values to create CSS box-shadow. Preview updates in real-time.

H-offset0pxV-offset10pxBlur20pxSpread0pxColorInset

Preview

box-shadow: 0px 10px 20px 0px #00000080;

Creative uses

Create neumorphic cards by pairing a light inset shadow with a dark outer glow.
Mimic drop shadows from design tools when translating mockups to production CSS.
Layer multiple `box-shadow` declarations to simulate ambient light or frosted glass effects.

Implementation tips

Use negative spread values to keep shadows tight on small elements like buttons.
Switch the preview background colour in DevTools to test contrast on dark mode themes.
Copy the CSS snippet and paste it straight into multi-shadow utilities such as Tailwind’s arbitrary values.

ADVERT

More like this

Format YAML, convert between YAML and JSON, and validate syntax instantly in your browser with offline support.

Decode JWT header and payload safely in your browser. Inspect claims and structure without sending tokens anywhere.

Create signed JSON Web Tokens with customizable headers and payloads. Choose HS256, HS384, or HS512 HMAC algorithms and copy the ready-to-use JWT.

Visually craft cron expressions with presets, interval selectors, and quick toggles. Copy the expression and preview the next scheduled runs instantly.

Parse cron expressions and preview next run times. Useful for devs managing scheduled tasks and crontab jobs.

Compute HMAC signatures with SHA-256, SHA-1, or MD5 using a secret key. Secure online hashing tool.

Test and debug JavaScript regular expressions. Highlight matches and quickly verify regex patterns.

Compose regular expressions with guided toggles for character sets, anchors, quantifiers, and flags. Test against sample input instantly.

ADVERT