ToolPuma Logo

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

10px
10px
20px
-5px
45%

What Is a CSS Box Shadow Generator?

The CSS Box Shadow Generator is a free online tool for creating custom box-shadow effects without manually calculating CSS values. Adjust horizontal and vertical offsets, blur, spread, shadow color, opacity, and inset mode while viewing the result live. It is useful for designing cards, buttons, input fields, modals, navigation elements, panels, and other UI components that need depth or elevation. Once the shadow looks right, copy the generated CSS directly into your project.

How to Use This CSS Box Shadow Generator

  1. 1
    Set the X offsetMove the horizontal offset to control whether the shadow extends left or right.
  2. 2
    Set the Y offsetAdjust the vertical offset to move the shadow upward or downward.
  3. 3
    Adjust blur and spreadIncrease blur for a softer shadow and change spread to make the shadow larger or smaller.
  4. 4
    Choose color and opacitySelect a shadow color and control how visible it should be.
  5. 5
    Choose the shadow typeEnable Inset when you want the shadow to appear inside the element rather than outside it.
  6. 6
    Copy the CSSCopy the generated box-shadow declaration and paste it into your stylesheet.

Frequently Asked Questions

The first value controls horizontal offset, the second controls vertical offset, the third controls blur, and the fourth controls spread. A color can then be added to define the appearance of the shadow.
Spread changes the size of the shadow before blur is applied. A positive value expands the shadow, while a negative value reduces it. This is useful for controlling how closely a shadow follows an element.
An inset shadow is rendered inside an element rather than outside it. It can make an element appear pressed, recessed, or physically embedded in a surface.
Use relatively small offsets, a larger blur radius, and a low-opacity shadow color. Soft shadows usually look more natural when they are subtle rather than completely opaque.
Large blurred shadows can require more rendering work than simple colors, particularly when many large elements use them or when shadows are animated. Keeping shadows moderate and avoiding unnecessary animation generally helps performance.
Yes. Copy the generated CSS and apply it to any element that supports box-shadow, including cards, buttons, menus, modals, input fields, and panels.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Border Generator

Style borders with width, style, color, and radius.

More Color & Design Tools

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.

Color Contrast Checker

Check the contrast ratio between two colors.