TapToolsCoffee
All tools

CSS Box Shadow & Radius Generator

Developer Tools

Tune box shadow and border radius with sliders, then copy CSS or Tailwind classes.

Box shadow

Border radius

Vanilla CSS

box-shadow: 0px 12px 32px -6px rgba(0, 0, 0, 0.35);
border-radius: 16px;

Tailwind CSS classes

shadow-[0px_12px_32px_-6px_rgba(0,0,0,0.35)] rounded-[16px]

What is the CSS Box Shadow & Border Radius Generator?

The CSS Effects Generator lets you design a box shadow and rounded corners visually. Move the sliders for offset, blur, spread, color, opacity and radius, watch the preview card change live, then copy either plain CSS or matching Tailwind CSS classes.

How to use this tool

  1. Move the X, Y, Blur and Spread sliders to shape the shadow.
  2. Pick a shadow color and opacity, and set the border radius.
  3. Toggle inset or change the preview colors if you like.
  4. Copy the CSS or the Tailwind classes into your project.

Frequently Asked Questions

Tailwind's built-in shadow presets cannot match custom values, so the tool writes arbitrary-value classes like shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.3)], which work in Tailwind v3 and v4.

Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A negative spread with a larger Y offset gives a soft, lifted look.

An inset shadow is drawn inside the element instead of outside, which makes it look pressed in.

No. Everything runs in your browser, so nothing is uploaded to a server.