CSS Box Shadow Generator
Visually design and generate CSS box-shadow code for your UI elements.
Local-first
Horizontal offset
10pxVertical offset
10pxBlur radius
20pxSpread radius
0pxCSS
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);
47 chars·6 words·1 line
Ready to copyHow this tool works
What it accepts, how to use it, and where your input is processed.
Show GuideHide Guide
How this tool works
What it accepts, how to use it, and where your input is processed.
Show GuideHide Guide
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
Related tools
Open after you finish the primary task.
ShowHide
Related tools
Open after you finish the primary task.
Base64 Encoder / Decoder
DeveloperEncode and decode text to and from Base64 format securely.
Open tool
My IP Address Info
DeveloperView your current public IP address and detected network information instantly.
Open tool
Subnet Mask Calculator
DeveloperCalculate network subnets, IP ranges, and CIDR notation for network engineering.
Open tool