CSS Box Shadow Generator
Create CSS box shadows visually
CSS Box Shadow Generator
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.35);
How to use CSS Box Shadow Generator
- •Adjust the horizontal and vertical offset sliders to position the shadow relative to the element. Positive values move the shadow right and down; negative values move it left and up.
- •Set the blur radius to control how soft or sharp the shadow edge appears. A value of 0 creates a hard shadow; higher values produce a more diffuse glow.
- •Set the spread radius to expand or contract the shadow. A positive spread makes the shadow larger than the element; a negative spread makes it smaller, which is useful for subtle bottom-only shadows.
- •Choose the shadow color and opacity. Semi-transparent black (
rgba(0,0,0,0.2)) is the most common choice for natural-looking shadows. - •Toggle inset if you want the shadow inside the element rather than outside. Copy the generated CSS.
What is the CSS box-shadow property?
The box-shadow CSS property adds one or more shadow effects to an element's frame. Each shadow is described by horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows are separated by commas and rendered from front to back (the first shadow is on top).
Box shadows are the primary way to create depth and elevation in web interfaces. Material Design, for example, uses a carefully calibrated system of shadows to communicate hierarchy — elevated elements cast larger, softer shadows. A card component might use box-shadow: 0 2px 4px rgba(0,0,0,0.1) at rest and box-shadow: 0 8px 24px rgba(0,0,0,0.15) on hover to signal interactivity.
Shadows can also be used creatively: multiple layered shadows with different colors create neon glow effects, hard shadows with zero blur produce a retro/brutalist aesthetic, and inset shadows simulate pressed or recessed elements. Unlike filter: drop-shadow(), box-shadow follows the element's rectangular border-box (including border-radius), making it predictable and easy to control.
Performance-wise, box-shadow is GPU-accelerated in modern browsers, but very large blur radii on many elements simultaneously can impact rendering performance. For most use cases, it is extremely efficient.
Common use cases
- •Card elevation: Add subtle shadows to card components to create visual depth and separation from the background.
- •Button states: Use different shadow intensities for default, hover, active, and focus states to provide visual feedback.
- •Modal dialogs: Apply a large, soft shadow to modals and popovers so they appear to float above the page content.
- •Neumorphism design: Combine an outer light shadow and an outer dark shadow to create the soft, extruded look of neumorphic interfaces.
FAQ
Q: Can I have multiple shadows on one element?
A: Yes. Separate multiple shadows with commas in the box-shadow value. They render in order, with the first shadow on top.
Q: What is the difference between box-shadow and drop-shadow?
A: box-shadow follows the element's rectangular box (respecting border-radius). filter: drop-shadow() follows the element's alpha channel, including transparent areas of PNG images. Use drop-shadow for non-rectangular shapes.
Q: Does box-shadow affect layout? A: No. Box shadows are purely visual and do not affect the element's size or layout. They can overflow the element's bounds and may need to be accounted for with padding or margin.
Is my data safe?
Yes. This tool runs entirely in your browser. Your data is never sent to our servers.
How to use CSS Box Shadow Generator
- Adjust the horizontal and vertical offset sliders to position the shadow relative to the element. Positive values move the shadow right and down; negative values move it left and up.
- Set the blur radius to control how soft or sharp the shadow edge appears. A value of 0 creates a hard shadow; higher values produce a more diffuse glow.
- Set the spread radius to expand or contract the shadow. A positive spread makes the shadow larger than the element; a negative spread makes it smaller, which is useful for subtle bottom-only shadows.
- Choose the shadow color and opacity. Semi-transparent black (
rgba(0,0,0,0.2)) is the most common choice for natural-looking shadows. - Toggle inset if you want the shadow inside the element rather than outside. Copy the generated CSS.
What is the CSS box-shadow property?
The box-shadow CSS property adds one or more shadow effects to an element's frame. Each shadow is described by horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows are separated by commas and rendered from front to back (the first shadow is on top).
Box shadows are the primary way to create depth and elevation in web interfaces. Material Design, for example, uses a carefully calibrated system of shadows to communicate hierarchy — elevated elements cast larger, softer shadows. A card component might use box-shadow: 0 2px 4px rgba(0,0,0,0.1) at rest and box-shadow: 0 8px 24px rgba(0,0,0,0.15) on hover to signal interactivity.
Shadows can also be used creatively: multiple layered shadows with different colors create neon glow effects, hard shadows with zero blur produce a retro/brutalist aesthetic, and inset shadows simulate pressed or recessed elements. Unlike filter: drop-shadow(), box-shadow follows the element's rectangular border-box (including border-radius), making it predictable and easy to control.
Performance-wise, box-shadow is GPU-accelerated in modern browsers, but very large blur radii on many elements simultaneously can impact rendering performance. For most use cases, it is extremely efficient.
Common use cases
- Card elevation: Add subtle shadows to card components to create visual depth and separation from the background.
- Button states: Use different shadow intensities for default, hover, active, and focus states to provide visual feedback.
- Modal dialogs: Apply a large, soft shadow to modals and popovers so they appear to float above the page content.
- Neumorphism design: Combine an outer light shadow and an outer dark shadow to create the soft, extruded look of neumorphic interfaces.
FAQ
Q: Can I have multiple shadows on one element?
A: Yes. Separate multiple shadows with commas in the box-shadow value. They render in order, with the first shadow on top.
Q: What is the difference between box-shadow and drop-shadow?
A: box-shadow follows the element's rectangular box (respecting border-radius). filter: drop-shadow() follows the element's alpha channel, including transparent areas of PNG images. Use drop-shadow for non-rectangular shapes.
Q: Does box-shadow affect layout? A: No. Box shadows are purely visual and do not affect the element's size or layout. They can overflow the element's bounds and may need to be accounted for with padding or margin.
Is my data safe?
Yes. This tool runs entirely in your browser. Your data is never sent to our servers.