Skip to main content
Book Consultation →
CSS100% FreeInstant

CSS Box Shadow Generator: Copy-Ready Shadow Code

This free CSS box shadow generator writes the box-shadow code for you. Set the offset, blur, spread, color and opacity, choose an inset shadow, or use a layered soft preset for modern cards.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

A box shadow lifts an element off the page. The syntax has five values in a fixed order, which is easy to forget. This tool writes it from labelled boxes, and gives both the CSS and the vendor-neutral color in rgba form.

Fill in the values and copy the line.

How to Use This Tool

  1. Set the offsets, blur and spread.
  2. Enter a HEX color and an opacity.
  3. Choose single or layered, and outer or inset.
  4. Press Generate and copy the CSS.

How the Calculation Works

The color is changed to rgba using your opacity. A single shadow is written as x y blur spread rgba(...). The layered preset repeats the shadow three times with the offset and blur doubled each time and the opacity reduced, which gives a smooth falloff.

Worked Example

Offsets 0 and 8, blur 24, spread 0, color #0f172a at 15% gives box-shadow: 0px 8px 24px 0px rgba(15, 23, 42, 0.15);.

Common Uses

  • Cards and buttons.
  • Modals and menus.
  • Focus rings with spread only.
  • Inner shadows on inputs.

Tips and Common Mistakes

  • Use a negative spread to keep shadows tight.
  • Low opacity looks more professional than dark shadows.
  • Test on dark backgrounds too.

Next, you may need the border radius generator, text shadow generator, CSS clamp calculator, px to rem converter.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

In order: horizontal offset, vertical offset, blur radius, spread radius and color. The word inset puts the shadow inside the box.
Several shadows stacked with growing blur and offset. They look more natural than one heavy shadow, and are common in modern interfaces.
It spreads the same color over a larger area, so it looks softer. Lower opacity also lightens it.
A few shadows are fine. Very large blurs on many animated elements can cost performance.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.