CSS Box Shadow Generator

Design a box-shadow visually and copy the CSS.

Overview

Builds multi-layer CSS box-shadow effects with visual sliders for horizontal offset, vertical offset, blur radius, spread, and inset depth.

box-shadow: [inset] Offset_X Offset_Y Blur_Radius Spread_Radius Color

Creates realistic skeuomorphic depth and subtle elevation layers adhering to modern UI design systems.

Inputs: Offset X = 0px | Offset Y = 10px | Blur = 25px | Spread = -5px | Color = rgba(0, 0, 0, 0.1)

Summary: Modern Card Elevation | Soft Blur (25px) | Negative Spread Applied

Card Elevation: Design subtle hover elevation states that lift interactive cards when users mouse over them.
Modal Dialog Drop Shadows: Create high-elevation focus shadows that separate modal overlays from page backdrops.
Neumorphism UI: Design soft inset shadows for pressed button states and toggle controls.

Negative spread shrinks the shadow smaller than the element itself, concentrating the blur directly beneath the element for a modern elevated look.

Adding the 'inset' keyword draws the shadow inside the element's border, creating an indented or sunken effect.

Yes, separate multiple shadow definitions with commas (e.g. box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.05);).

JSON Formatter - Pretty-print, minify and validate JSON.
Base64 Encoder/Decoder - Encode text to Base64 or decode it back.
Color Picker - Pick a color and read off HEX, RGB and HSL instantly.
Regex Tester - Test a regular expression against sample text with live match highlighting.
HTML Formatter - Indent and clean up messy HTML markup.
SQL Formatter - Readable indentation for SQL queries.