CSS Box Shadow Generator

Four sliders + color + inset toggle = a shadow you can see before you ship, with one-click copy.

Quick answer: Design CSS box-shadows with sliders for offset, blur, spread, color and inset — live preview on a card, copy-ready code. Free and fully in-browser.

X Y Blur Spread Opacity inset

How to use

Drag the sliders; watch the preview card.

About this tool

box-shadow takes x-offset, y-offset, blur, spread, color and an optional inset keyword. Getting the feel right by typing numbers is slow; this tool renders every slider move live on a sample card and emits the exact CSS line, including rgba() with your chosen opacity.

CSS Box Shadow Generator

How to use

About this tool

FAQ

Related tools

JSON Formatter

CSV to JSON Converter

Regex Tester

Base64 Encoder / Decoder

URL Encoder / Decoder

Hash Generator (SHA-256)

UUID Generator

Epoch Timestamp Converter

JWT Decoder

Cron Expression Generator

AI Token Counter

Fake Person Generator

Fake Email Generator

Credit Card Validator

Phone Number Validator

Email Validator

Data Storage Converter

HTML Encoder / Decoder

JSON to CSV Converter

CSV to JSON Converter

XML Formatter / Beautifier

SQL Formatter

Markdown Previewer

IP Subnet Calculator

Unix Timestamp Converter

CSS Gradient Generator

HTTP Status Code Lookup