CSS Box Shadow Generator
Design the perfect box shadow — X, Y, blur, spread, opacity, and inset — with live preview and copy-ready CSS.
Shadow Settings
Preview & CSS
box-shadow: 4px 6px 12px -2px rgba(17, 24, 39, 0.3);By Vizo ToolLast updated August 20264 min read
CSS Box Shadow Generator — Design Shadows Visually
The CSS Box Shadow Generator helps you create the perfect box shadow with live previews. Adjust X and Y offsets, blur, spread, opacity, and color with sliders, toggle inset shadows for depth, and copy the exact CSS in one click.
Whether you're building soft elevation for cards or sharp inset edges for input fields, the live preview shows your shadow on both light and dark surfaces so it looks right everywhere.
- X · Y · Blur · Spread
- Opacity & inset
- Live preview
- Copy CSS in one click
Why Use Box Shadow Generator?
Every Property Covered
X, Y, blur, spread, color, opacity, and inset — all controllable.
Live Preview
See your shadow update in real time on light and dark surfaces.
Inset Support
Create inner shadows for depth on buttons and inputs.
Copy-Ready CSS
One click copies the exact box-shadow declaration.
Features
Offset Sliders
Fine-tune X and Y offsets in pixels, including negative values.
Blur & Spread
Control softness and size independently.
Opacity & Color
Set the shadow color with an opacity slider for soft, natural depth.
Inset Toggle
Switch between outer and inner shadows.
Dual-Surface Preview
Preview the shadow on light and dark cards simultaneously.
Instant Copy
Copy the generated CSS to your clipboard.
How to Create a Box Shadow
Design a shadow and copy the CSS in three steps.
Adjust the sliders
Set X, Y, blur, spread, opacity, and pick a color.
Preview & refine
Check the live preview on light and dark surfaces; toggle inset for inner shadows.
Copy the CSS
Copy the generated box-shadow declaration into your stylesheet.
Frequently Asked Questions
Got questions? We've got answers.
What is a CSS box shadow?▼
It's a CSS property that draws a shadow around an element's box, defined by offsets, blur, spread, color, and optional inset.
Is the box shadow generator free?▼
Yes, completely free with no sign-ups.
What does blur do?▼
Blur controls how soft the shadow edge is — a larger blur creates a softer, more diffuse shadow.
What does spread do?▼
Spread grows (positive) or shrinks (negative) the shadow size around the element.
What is an inset shadow?▼
An inset shadow is drawn inside the element, creating a recessed effect — ideal for inputs and pressed buttons.
How do I make a soft material shadow?▼
Use a small offset (0–4px), a large blur (10–24px), and low opacity (10–25%) with a dark color.
Can I use negative offsets?▼
Yes, negative X/Y offsets move the shadow up or left.
Can I copy the CSS?▼
Yes, one click copies the full box-shadow declaration.
Does it work in dark mode?▼
Yes — the previews adapt to the site theme, and you can see shadows on dark surfaces.
Does it work on mobile?▼
Yes, fully responsive.
Can I use this for multiple shadows?▼
For multiple layered shadows, generate each separately and combine them with commas.
What browsers support box-shadow?▼
All modern browsers support box-shadow, including Safari, Chrome, Firefox, and Edge.
Related Tools
Try more free browser-based image tools.
Compress
Reduce image file size instantly
Resize
Perfect dimensions every time
Flip
Mirror & rotate instantly
Convert
PNG, JPEG, WEBP — instantly
Watermark
Protect photos with text or logo
Remove Background
AI background remover in your browser
Passport Photo
Passport-size photos for 25+ countries
Image to PDF
Merge JPG, PNG & HEIC into one PDF
PDF to Image
Convert PDF pages to JPG or PNG
Signature Resizer
Resize signatures to any size & KB limit
Social Media Resizer
Exact sizes for every social platform
JSON Formatter
Beautify, minify & validate JSON instantly
JSON Validator
Validate JSON with error line numbers
Base64 Encoder
Encode text or files to Base64
Base64 Decoder
Decode Base64 back to text or files
Password Generator
Strong random passwords with a strength meter
UUID Generator
Generate UUID v1, v4 & v7 in bulk
QR Code Generator
QR codes for URLs, WiFi, WhatsApp & more
Gradient Generator
Linear, radial & conic CSS gradients
JWT Decoder
Decode JWT tokens & check expiry
SQL Formatter
Beautify & minify SQL queries
HTML/CSS/JS Playground
CodePen-style editor with live preview & console
SQL Playground
Run SQLite queries in your browser with sql.js
Meta Tag Generator
Create perfect SEO meta tags & SERP preview
Schema Generator
Generate JSON-LD structured data for 15+ types
Open Graph Generator
Design social share cards with live previews
Robots.txt Generator
Build a clean robots.txt in seconds
Sitemap Generator
Create XML sitemaps with image & video entries
UTM Builder
Build trackable campaign URLs with QR code
SERP Preview
See how your listing looks in Google search
Slug Generator
Create clean SEO-friendly URL slugs
Meta Tag Analyzer
Audit any page's meta tags & SEO score
Heading Checker
Check H1–H6 hierarchy & duplicate headings
Traffic Checker
Estimate website traffic from public SEO signals
SIP Calculator
Estimate the future value of your monthly SIP investments
Compound Interest
See how your principal grows with compound interest
EMI Calculator
Monthly EMI, interest & full amortization schedule
GST Calculator
Add or remove GST with CGST/SGST split
FD Calculator
Fixed deposit maturity value & interest earned
CAGR Calculator
Annualized growth rate of your investment
ROI Calculator
Return on investment & annualized ROI
Income Tax
Estimate Indian income tax — old & new regimes
Retirement Calculator
Project your retirement corpus & monthly income
Discount Calculator
Final price and savings after a discount
Profit Margin
Profit, margin & markup from cost and price
Stock Average
Average buy price across multiple purchases
Salary Calculator
Estimate take-home salary from CTC
Inflation Calculator
How inflation erodes purchasing power
Thumbnail Downloader
Download YouTube thumbnails in all available resolutions
Tags Extractor
Analyze video tags & get smart tag suggestions
Transcript Extractor
Get the transcript of any YouTube video with timestamps
Title Generator
Generate catchy, SEO-scored YouTube titles instantly
Description Generator
Write SEO-ready video descriptions with hashtags
Video Downloader
Save videos & audio — MP4, MP3, M4A with quality options