CSS Box Shadow Generator
Generate box-shadow values visually. Adjust offset, blur, spread, color, and use inset or multiple shadows. Copy the CSS instantly.
Preview
Shadows
CSS
box-shadow: 0px 4px 12px 0px #00000080; Presets
Table of Contents
What is box-shadow?
box-shadow is a CSS property that draws one or more shadows behind an element. You control the horizontal and vertical offset, blur radius, spread, color, and whether the shadow is inset (inside the element). Box shadows add depth and separation without extra markup or images.
Syntax
box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Multiple shadows are comma-separated. Offset X/Y move the shadow; blur softens the edge; spread grows or shrinks the shadow; color can be hex, rgb, or rgba. Use inset for an inner shadow.
Use Cases
- Cards and panels — Soft shadows to lift content off the page.
- Buttons — Subtle depth or inset for pressed state.
- Modals and dropdowns — Layered shadows for elevation.
- Images — Frame or float images with a shadow.
Frequently Asked Questions
An inset box shadow is drawn inside the element’s border box, as if the light were coming from above and the element were recessed. Use it for pressed buttons, inputs, or sunken panels.
Yes. Add more shadows with “Add shadow.” They stack in order; the first shadow is on top. Use multiple shadows for layered depth or combined inset and outset effects.