Adjust offsets, blur, spread, color, and opacity, then copy the CSS.
The CSS Box Shadow Generator helps you choose a box-shadow for a card, button, or other element. Adjust the controls, review the preview, and copy the CSS into your project.
Horizontal and vertical offsets move the shadow. Blur softens its edge, spread grows or shrinks it, and color and opacity determine its appearance against the background.
CSS also supports the inset keyword for an inner shadow and comma-separated shadow layers. The interface shown here does not include inset or add-layer controls, so those effects require editing the copied CSS.
box-shadow: 0 4px 6px rgba(0,0,0,0.1);This example places a light shadow below the element. Review its appearance on your intended background before choosing it for a component.
Use a consistent shadow style across related components rather than choosing each one in isolation. Transparent colors can help a shadow blend with a background, but check the result on the surfaces your interface uses.
Test the copied box-shadow with the element's dimensions, nearby content, and clipping containers. The preview is a starting point, not a guarantee that box-shadow will appear the same in every layout.
Continue with the CSS Text Shadow Generator or the CSS Border Radius Generator to style the rest of the component.
How to Use CSS Box Shadow Generator - Preview Element Shadows
Adjust Offset X, Offset Y, Blur Radius, Spread Radius, Color, and Opacity.
Check Preview and CSS Output. Compare the shadow against the background and dimensions of your actual component.
Use Copy beside CSS Output. Add inset or layered effects in your own stylesheet if needed, since those controls are not shown here.
Adjust offsets, blur, spread, color, and opacity, then copy the CSS.
Tool Use:
5Added:
Sep 11, 2026Type:
Free ToolPrivacy:
Client SideQR code generator for URLs and text. Adjust dimensions, margin, colors, and an optional logo, then download the code and test it before sharing.
Stylish text generator with fonts, colors, gradients, shadows, and strokes. Set the canvas size, preview your design, and download it as a PNG.
Random data generator for test datasets and prototypes. Choose fields and a row count, generate sample records, and review the output before exporting.