CompleteToolkit

Box-Shadow Generator

Design CSS box-shadows with sliders and a live preview — offsets, blur, spread, opacity and inset.

CSS

box-shadow: 0px 8px 24px -4px rgba(15, 18, 34, 0.25);

About this tool

Box-shadow is the CSS property with five values nobody remembers the order of — horizontal offset, vertical offset, blur radius, spread radius, color — and the one where tiny numeric changes make the difference between elegant depth and a muddy smudge. A visual editor is simply the right interface for it: drag the sliders, watch the card in the preview respond, copy the CSS when it looks right.

Every parameter is covered: X and Y offsets (including negatives for shadows that fall upward or leftward), blur, spread (negative spread is the secret behind tight, expensive-looking shadows), shadow color, opacity as a simple percentage slider, and the inset toggle for inner shadows used in pressed buttons and input wells. The output uses rgba() color, so your shadow keeps its transparency over any background.

The default values loaded on this page aren't arbitrary — a soft shadow with slight negative spread and low opacity is the modern SaaS look, and the same recipe this site's own cards use. Nudge from there rather than starting from zero: real-world shadows are almost always softer, lower-opacity and more vertically offset than first instincts suggest.

How to use the Box-Shadow Generator

  1. 1Drag the sliders: horizontal and vertical offset, blur, spread and opacity.
  2. 2Pick the shadow color — dark navy or the element's own hue often looks better than pure black.
  3. 3Toggle Inset for inner shadows (pressed buttons, input fields).
  4. 4Copy the CSS when the preview looks right.

Frequently asked questions

What does each box-shadow value mean?

In order: horizontal offset (positive = right), vertical offset (positive = down), blur radius (bigger = softer), spread (grows or shrinks the shadow before blurring), and color. This generator labels each one so you never need to memorize the order.

What does negative spread do?

It shrinks the shadow smaller than the element before blur is applied, producing a tight shadow concentrated under the element — the refined look most modern design systems use. Try spread −4 with blur 24 and low opacity.

What is an inset shadow for?

Inset draws the shadow inside the element instead of behind it — used for pressed/active button states, recessed input fields, and wells. Toggle Inset and the preview shows the effect immediately.

Why does my shadow look muddy or dirty?

Almost always: opacity too high or pure black at full strength. Real shadows are subtle — try 15–30% opacity, and consider a dark navy or the element's own color family instead of #000000.

Related tools

CSS Gradient Generator

Design linear and radial gradients visually — with the exact CSS one click away.

Open tool

Color Picker & Converter

Pick any color and get its HEX, RGB and HSL values with one-tap copy.

Open tool

HEX / RGB / HSL Converter

Paste a color in any format — HEX, rgb() or hsl() — and get all three, instantly.

Open tool

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA — with a live preview of how it actually reads.

Open tool