CSS Box Shadow Generator

Create CSS box shadows with sliders, layers and presets, see them live and copy the code. Free and private.

Shadow settings

Start from a preset

Horizontal offset: 0px

Vertical offset: 10px

Blur: 25px

Spread: 0px

Opacity: 20%

Shadow colourInset (inside the box)

Preview

Your box

Box colourBackgroundCorner roundness: 18px

CSS code

box-shadow:
  0px 10px 25px 0px rgba(10, 43, 39, 0.2);

Paste the code into the style of any element. Nothing is sent to a server.

About This Tool

NinjaFunction's CSS Box Shadow Generator lets you design a shadow by moving sliders for offset, blur, spread and opacity, and see the result on a live preview box. Add up to five layers, switch to an inset shadow, start from ready presets such as Soft, Layered or Glow, change the box and page colours, and copy the finished CSS in one click. It runs in your browser, so nothing is sent to a server.

🔑 How to Use

Start with a preset such as Soft, Sharp, Layered, Glow, Inner or Soft UI, or begin from the default.
Move the sliders for the horizontal and vertical offset, blur, spread and opacity. The box on the right changes as you drag.
Pick the shadow colour and tick Inset if you want the shadow inside the box.
Add layers with the Add layer button for a richer shadow, and switch between them with the Layer buttons.
Click Copy CSS and paste the code into your stylesheet.

💡 Pro Tips

✔ Use low opacity. Shadows between 10 and 25 percent usually look the most natural.
✔ Layer two or three shadows with growing blur for a soft, realistic look.
✔ Keep the light in one direction. If one shadow falls down and right, make all of them do the same.
✔ Pair it with the CSS Gradient Generator for backgrounds.

What Each Setting Does

Setting	What it changes
Horizontal offset	Moves the shadow left (negative) or right (positive)
Vertical offset	Moves the shadow up (negative) or down (positive)
Blur	Makes the edge soft. 0 gives a hard edge
Spread	Makes the shadow bigger or smaller before it is blurred
Colour and opacity	The shade of the shadow and how see-through it is
Inset	Draws the shadow inside the box

Tips for Good-Looking Shadows

Raise elements with a bigger vertical offset. The higher a card seems to float, the larger the offset and blur.
Match the shadow to the background. A tinted shadow, such as dark green on a green page, looks softer than pure black.
Use a glow for focus. A coloured shadow with no offset works well as a highlight around a button.
Check contrast. A shadow should never be the only thing that separates text from its background.

Frequently Asked Questions

How do I add a shadow to an element in CSS?

Use the box-shadow property, for example box-shadow: 0px 10px 25px 0px rgba(10, 43, 39, 0.2);. The numbers are the horizontal offset, the vertical offset, the blur, the spread and the colour. Copy the code from this tool and paste it into your style.

Can I use more than one shadow?

Yes. Separate the shadows with commas, and the first one sits on top. This tool lets you add up to five layers and writes the code for you. Layered shadows look softer and more natural than one big shadow.

What does an inset shadow do?

An inset shadow is drawn inside the box instead of outside it. It makes the box look pressed in, and it is often used on input fields and pressed buttons.

What is the difference between blur and spread?

Blur makes the edge of the shadow soft. Spread makes the whole shadow bigger, or smaller if the number is negative, before the blur is applied.

What is the difference between box-shadow and drop-shadow?

box-shadow follows the rectangle of the element, including its rounded corners. The drop-shadow filter follows the real outline of the content, so it also works on transparent images and shapes.

Do box shadows slow down my page?

A few shadows cost almost nothing. Very large blurs on many elements, or on elements that move, can slow older phones, so keep blur values reasonable and avoid animating shadows on long lists.

Does it work in every browser?

Yes. The box-shadow property works in all current browsers, and the code from this tool needs no prefixes.