Skip to main content

CSS Box Shadow GeneratorDeveloper

Visually design and generate CSS box-shadow code for your UI elements.

Horizontal offset

10px

Vertical offset

10px

Blur radius

20px

Spread radius

0px
CSS
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);
47 chars·6 words·1 line
Ready to copy

Capabilities & How-To Guide

Instructions, supported options, and client-side privacy guarantee.

Box Shadows add depth and dimension to your web elements. Our visual generator allows you to fine-tune the offsets, blur, and spread to create perfect, modern shadows without touching a line of CSS.

Shadow Properties:

  • Horizontal Offset: Move the shadow left or right.
  • Vertical Offset: Move the shadow up or down.
  • Blur Radius: How "soft" the edge of the shadow is.
  • Spread Radius: Increase or decrease the size of the shadow relative to the element.
  • Inset: Turn the shadow inside the box for a "pressed" effect.
Need an extra feature or found an edge case?Send Feedback