CSS Box Shadow Generator — Visual Editor

Create CSS box shadows with a visual editor. Adjust offset, blur, spread, and color. Copy ready-to-use CSS code.

box-shadow: 0px 4px 6px -1px #0000001a;

Presets

CSS Box Shadow

The box-shadow property adds shadow effects to elements. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. The optional inset keyword creates an inner shadow.

Performance Tips

Box shadows with large blur values can impact rendering performance, especially during animations. For better performance, use filter: drop-shadow() for simple shadows or pre-render complex shadows as images.

Related Tools

Color Picker
Pick colors and convert between HEX, RGB, and HSL formats.
CSS Minifier / Beautifier
Minify or beautify CSS code. Remove whitespace or format for readability.
CSS Gradient Generator
Create CSS linear and radial gradients with a visual editor and presets.