You Might Also Like
Rate this tool:
Was this tool helpful?
Was this tool helpful?
Was this tool helpful?
Craft layered CSS box-shadows with a live preview — copy production-ready code.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);box-shadow CSS.Everything renders live in your browser — no uploads, no tracking.
A CSS box-shadow generator is a visual tool that lets you design shadows for HTML elements without writing code by hand. You adjust the offset, blur, spread, color, and inset options with sliders and a color picker while watching a live preview update in real time. When the shadow looks right, you copy the ready-to-use box-shadow CSS straight into your stylesheet.
The box-shadow syntax is offset-x offset-y blur spread color. Offset-x moves the shadow horizontally (positive right, negative left), offset-y moves it vertically (positive down, negative up), blur softens the edge, spread grows or shrinks the shadow, and color sets its hue and opacity.
Add the inset keyword to the box-shadow value, for example box-shadow: inset 0 2px 6px rgba(0,0,0,0.3). The inset keyword draws the shadow inside the element's border instead of outside it, which is useful for pressed buttons and recessed inputs.
Yes. Separate each shadow with a comma, for example box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15). Shadows are painted front to back, so the first one in the list sits on top. Layering several shadows produces softer, more realistic elevation.
Spread is the fourth length value in box-shadow and controls how much the shadow expands or contracts before the blur is applied. A positive spread makes the shadow larger than the element, while a negative spread makes it smaller, which is handy for tight, focused shadows.
Craft layered CSS box-shadows with a live preview — copy production-ready code.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);box-shadow CSS.Everything renders live in your browser — no uploads, no tracking.
A CSS box-shadow generator is a visual tool that lets you design shadows for HTML elements without writing code by hand. You adjust the offset, blur, spread, color, and inset options with sliders and a color picker while watching a live preview update in real time. When the shadow looks right, you copy the ready-to-use box-shadow CSS straight into your stylesheet.
The box-shadow syntax is offset-x offset-y blur spread color. Offset-x moves the shadow horizontally (positive right, negative left), offset-y moves it vertically (positive down, negative up), blur softens the edge, spread grows or shrinks the shadow, and color sets its hue and opacity.
Add the inset keyword to the box-shadow value, for example box-shadow: inset 0 2px 6px rgba(0,0,0,0.3). The inset keyword draws the shadow inside the element's border instead of outside it, which is useful for pressed buttons and recessed inputs.
Yes. Separate each shadow with a comma, for example box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15). Shadows are painted front to back, so the first one in the list sits on top. Layering several shadows produces softer, more realistic elevation.
Spread is the fourth length value in box-shadow and controls how much the shadow expands or contracts before the blur is applied. A positive spread makes the shadow larger than the element, while a negative spread makes it smaller, which is handy for tight, focused shadows.