CSS Box Shadow Generator
Create CSS box shadows visually with live controls and copy ready-to-use CSS.
Shadow Controls
Shadow Presets
Live Preview
CSS
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.14);Generated locally in your browser
CSS box shadow ready.
What is a CSS Box Shadow Generator?
A CSS Box Shadow Generator helps you create the CSS box-shadow property visually. Adjust offsets, blur, spread, color, opacity, and inset mode while the preview and copy-ready CSS update instantly in your browser.
How It Works
Create a box shadow visually
-
Start with a preset
Use Subtle, Soft, Floating, or Crisp as a clean starting point.
-
Tune the shadow
Adjust offset, blur, spread, color, opacity, and inset mode.
-
Check the preview
The preview updates instantly so you can judge the shadow before copying.
-
Copy the CSS
Copy one ready-to-use box-shadow declaration.
Features
Built for practical CSS shadows
-
Live preview
See each shadow change immediately without a Generate button.
-
Exact controls
Use sliders and numeric fields for offsets, blur, spread, and opacity.
-
Color and opacity
Pick a HEX color and keep alpha controlled through opacity.
-
Outer or inset shadows
Toggle inset mode while keeping one clear CSS output.
-
Copy-ready CSS
Copy only the production-ready box-shadow declaration.
-
Browser-local
Shadow values are processed on your device and are not uploaded or stored.
Frequently Asked Questions
Quick answers to common questions about using this tool.
What does CSS box-shadow do? +
The CSS box-shadow property adds a shadow around an element box. It can create subtle depth, sharp offset shadows, or inset shadows inside the element.
What do the box-shadow values mean? +
The values are horizontal offset, vertical offset, blur radius, spread radius, and color. Inset appears before those values when the shadow should render inside the element.
Can box-shadow offsets be negative? +
Yes. Negative horizontal offset moves the shadow left, and negative vertical offset moves it upward.
Can spread be negative? +
Yes. Negative spread tightens the visible shadow area, which can help make soft shadows feel less bulky.
Can blur be negative? +
No. CSS blur radius cannot be negative, so this tool keeps blur at 0px or higher.
What is an inset box shadow? +
An inset box shadow renders inside the element instead of outside it. It is useful for pressed states, inner edges, and recessed UI effects.
Do modern browsers support box-shadow? +
Yes. CSS box-shadow is supported by modern browsers and does not need a vendor prefix for normal use.
Is the generated CSS stored or uploaded? +
No. The preview and CSS output are generated locally in your browser. PotatoTools does not upload, store, or save the shadow values.
Related Tools
CSS Formatter
Format and beautify CSS code instantly.
Open ToolColor Shades Generator
Generate beautiful light to dark shades of any color.
Open ToolHEX to RGBA Converter
Convert HEX colors to copy-ready RGBA with live opacity control.
Open ToolRGBA to HEX Converter
Convert RGB and RGBA colors to copy-ready 8-digit HEX.
Open Tool