Developer

CSS Box Shadow Generator

Design CSS box shadows visually with offset, blur, spread, color, and inset controls.

Developer

Why Use the CSS Box Shadow Generator?

Getting depth right by trial and error in a code editor is slow, so this CSS box shadow generator lets you shape the shadow visually and copy a single finished box-shadow line. Sliders control horizontal and vertical offset, blur, spread and opacity, a color field sets the shadow tint, and an inset checkbox flips the shadow inside the element. The preview box updates as you drag, which helps front-end developers and UI designers dial in soft card shadows, crisp outlines or pressed-in effects.

How to Use the CSS Box Shadow Generator

  1. Choose a shadow color with the picker or type a HEX, rgb(), hsl() or CSS color name value; a dark tint of your background usually looks more natural than pure black.
  2. Drag the horizontal and vertical offset sliders to move the shadow, using a positive vertical offset to suggest light coming from above.
  3. Adjust the blur, spread and opacity sliders until the edge softness and strength feel right, and tick the inset checkbox if you want the shadow drawn inside the box.
  4. Click Copy on the box-shadow output and paste the line into the CSS rule for your card, button or panel.

Best For

  • Giving product or blog cards a soft lift so they separate from a light page background.
  • Creating a pressed or recessed look for input fields and toggle switches with an inset shadow.
  • Adding a stronger hover shadow to clickable cards so users can tell they are interactive.
  • Making a crisp outline ring with zero blur and a small spread as an alternative to a border.

Pro Tip

Realistic shadows usually combine a low opacity, a generous blur and a slightly negative spread, which keeps the shadow tucked under the element instead of bleeding out on every side. For more depth, generate two shadows, one small and sharp and one large and soft, and join them in a single box-shadow declaration separated by a comma. Tinting the shadow with a dark version of the background hue keeps it from looking gray and dirty on colored pages.

FAQ

CSS Box Shadow Generator FAQ

What are the values in CSS box-shadow?

The order is an optional inset keyword, then horizontal offset, vertical offset, blur radius, spread radius and color. Only the two offsets are required, and blur and spread default to zero if omitted. For example, box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2) creates a soft shadow that falls slightly below the element.

What is the difference between blur and spread in box-shadow?

Blur controls how soft the edge of the shadow is, with larger values fading it out over a wider area, and it cannot be negative. Spread changes the size of the shadow before blurring, so positive values grow it and negative values shrink it. Combining a large blur with a negative spread produces a soft shadow that stays under the element.

What does inset do in box-shadow?

The inset keyword draws the shadow inside the element border instead of outside it. This makes the element look pressed into the page, which suits input fields, wells and active button states. Offsets work in reverse visually, so a positive vertical offset darkens the top inner edge.

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

box-shadow follows the rectangular box of the element, including its border-radius, and supports spread and inset. The filter drop-shadow() function follows the actual visible shape of the content, such as the outline of a transparent PNG or an SVG icon. Use box-shadow for cards and buttons, and drop-shadow for irregular shapes.

Learn more

Guides for the CSS Box Shadow Generator

Development

CSS Box Shadow: How to Create Realistic, Layered Shadows

Master CSS box shadow syntax, then build realistic layered shadows with tinted colors, elevation tokens and dark-mode variants that look natural in any UI.

Read Guide

Development

HEX Color Opacity: 8-Digit HEX, RGBA and a Full Transparency Table

Learn how HEX opacity works with 8-digit HEX codes, get a full transparency table from 100% to 0%, and know when to use #RRGGBBAA, rgba() or opacity.

Read Guide

Related tools

Keep Exploring Color Tools

Browse all 34 free color tools

Color Code Converter Paste a HEX, RGB, HSL, or CSS color name and convert it to every other color format. HEX to RGB Converter Convert HEX color codes to RGB and RGBA values with a step-by-step breakdown of the math. RGB to HEX Converter Turn red, green, and blue values into a HEX color code, including 3-digit shorthand. HEX Opacity Calculator Add transparency to any color and get 8-digit HEX, RGBA, and HSLA values instantly. Tailwind CSS Color Generator Turn any color into a Tailwind 50–950 shade scale for tailwind.config.js or @theme. Light & Dark Theme Previewer Preview an accent color in light and dark themes side by side and copy the theme CSS. HTML Color Names Browse and search all 148 HTML and CSS named colors with HEX and RGB values. Color Picker Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK codes plus the nearest color name.
Copied