CSS box-shadow Generator

Generate box-shadow with live preview.

About this tool

This tool generates box-shadow visually. Three features: 1) Adjust offset, blur, spread, color with sliders, 2) Add multiple shadows, 3) Copy generated CSS directly. Ideal for card elevation and button press effect.

Tool interface

Parameter guide

X/Y offset=shadow direction, Blur=softness, Spread=expansion, Color/Opacity=appearance. Preview updates in real-time.

15%
Shadow appears here 
  
 
 
  
   
 
 
 
Usage
 
     
  1. Adjust offset, blur, spread, color with sliders
  2. Preview the shadow appearance
  3. Copy generated CSS. Multiple shadows supported
    4.  
 
 
 
When to use
 
Card elevation, button press effect, modal shadow, depth.
 
 
 
Examples
 
0 4px 6px -1px rgba(0,0,0,0.1), 0 10px 15px -3px rgba(0,0,0,0.1)
 
  
 
FAQ
 
 
 
How to write box-shadow?
 
box-shadow: offsetX offsetY blur spread color; e.g. 0 4px 6px rgba(0,0,0,0.1). Add inset for inner shadow.
 
 
How to add multiple shadows?
 
Separate with commas. box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05). First is on top.
 
 
box-shadow vs drop-shadow?
 
box-shadow = rectangular shadow. filter: drop-shadow() = follows element shape (ignores transparent). Use drop-shadow for icons.
 
 
Blur vs spread?
 
Blur = softens edges. Spread = enlarges/shrinks shadow. Negative spread makes shadow smaller.
 
 
Is CSS box-shadow Generator free?
 
Free to use, no sign-up required.
 
 
Is data sent to a server?
 
Data stays on your device; we do not store it on our servers.
 
 
Supported browsers?
 
Tested on recent Chrome, Edge, Firefox, and Safari.
 
 
Offline use?
 
Core features work offline after the first load.
 
 
vs CLI or desktop apps?
 
CSS box-shadow Generator is an install-free online alternative to CLI or desktop apps.
 
 
When to use it?
 
Use it when: Card elevation, button press effect, modal shadow, depth.
 
 
Usage example?
 
Example: 0 4px 6px -1px rgba(0,0,0,0.1), 0 10px 15px -3px rgba(0,0,0,0.1)
 
 
Main features?
 
Live preview, Multiple shadows, Copy CSS
 
 
How is this different from similar tools?
 
CSS box-shadow Generator runs in the browser with no install—ideal for quick checks before heavier CLI or IDE workflows.
 
 
Search keywords
 
影, box-shadow, CSS, カード, デザイン, 影 作り方
 
 
 
 
  
 
Basic workflow
 
     
  1. Adjust offset, blur, spread, color with sliders
  2. Preview the shadow appearance
  3. Copy generated CSS. Multiple shadows supported
    4.  
 
 
Practical use cases
 
     
  • Card elevation, button press effect, modal shadow, depth.
  • This tool generates box-shadow visually. Three features: 1) Adjust offset, blur, spread, color with sliders, 2) Add multiple shadows, 3) Copy generated CSS directly. Ideal for card elevation and button press effect.
  • Live preview
  • Multiple shadows
    •  
 
 
 
Privacy & data handling
 
Data stays on your device; we do not store it on our servers.
 
 
 
Things to watch out for
 
     
  • Always double-check before pasting output into production
  • Try incognito if extensions break the page
  • Wait for processing on large inputs
    •  
 
 
 
Related learning content
  
  
 
 
Related tools
  
 
 
Tool set
 
 
 
Color & Design Set