CSS Shadow and Border Generator
Preview a shadow, rounded corners, and a border, then export the values as one snippet.
Start from
px
px
px
px
%
px
px
Your result
Your card
Move a slider to see the shadow.
How to use it
- Start from a preset or move the sliders.
- Pick the shadow and border colours, and the page colour behind the card.
- Copy the CSS or download it as a file.
Examples
- Soft cardY 8, blur 24, strength 18% box-shadow: 0px 8px 24px 0px rgba(16, 43, 41, 0.18);
- Hard offsetX 6, Y 6, blur 0, strength 100% box-shadow: 6px 6px 0px 0px #102b29;
Tool details and privacy
Shape a box shadow, corner radius, and border with sliders, see it on a card, and copy the CSS.
Shadows are easier to judge by eye than by numbers.
Options
- Offsets −80 to 80, blur 0 to 80, spread −40 to 40, radius 0 to 80, border 0 to 8. An inner shadow is optional.
Limits
- One shadow layer. Stack more by hand if you need them.
- The result is CSS, not a picture.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
Can the shadow go up or left?
Yes. Use negative offsets.
How do I soften it?
Lower the strength or raise the blur.
Can I make a pressed-in look?
Yes. Turn on the inner shadow.
Is anything uploaded?
No.