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.

Want a nice shadow on a card design, but always forget the box-shadow value syntax? This is the tool for you. Move the sliders for X/Y offset, blur, and spread and the shadow preview updates in real time. Rich multi-shadow expressions are easy to create too, and once you have a shadow you like, just copy the CSS and use it.

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.
 
 
How to use the box-shadow generator tool?
 
Adjust offset, blur, spread, and color with sliders. Preview the result and copy the generated CSS.
 
 
Card lift effect?
 
Use 0 4px 6px -1px rgba(0,0,0,0.1) and similar. Adjust offset and blur in this tool to create it.
 
 
What is an inset shadow?
 
A shadow cast inside the element, creating a recessed look. Select the inset option in this tool.
 
 
Modal shadow?
 
Use a larger blur such as 0 10px 15px -3px rgba(0,0,0,0.1). Adjust in this tool to create a modal shadow.
 
 
Shadow color with transparency?
 
Use alpha, e.g. rgba(0,0,0,0.1), for a subtle shadow. A thin black shadow is common.
 
 
How to copy the box-shadow CSS?
 
Adjust the shadow in this tool, copy the generated CSS with one click, and paste it into your project.
 
 
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 generator, css box shadow, box shadow css generator, shadow css, box shadow preview, shadow generator
 
 
 
 
  
 
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
 
     
  • Treat CSS box-shadow Generator as a quick check — re-verify critical values in your editor or CI before shipping.
  • If a browser extension breaks the page, retry in a private window with extensions disabled.
  • Very large pastes can freeze a tab briefly — wait for the result before closing the tab.
    •  
 
 
 
Related learning content
  
  
 
 
Related tools
  
 
 
Tool set
 
 
 
Color & Design Set