CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
Offset X0px
Offset Y10px
Blur25px
Spread-5px
Opacity0.4
Color
CSS
box-shadow: 0px 10px 25px -5px rgba(0, 242, 254, 0.4);Understanding the box-shadow Property
The CSS box-shadow property takes horizontal and vertical offsets, a blur radius, a spread radius, and a color. Positive offsets push the shadow right and down; spread grows or shrinks the shadow; and the inset keyword draws the shadow inside the element for a pressed-in look. Use the 15 named presets to jump-start your design or tune the controls and copy production-ready CSS — all generated in your browser.
Private & free — this tool runs entirely in your browser.
Recommended: Kinsta — Fast managed hosting — up to $500 + 10% recurring.affiliate
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.
HSB to HEX
Convert HSB / HSV values to HEX colors.