CSS Box Shadow: Complete Guide with Online Generator

By FreeToolBox Team · ·
css box shadowbox shadow generator onlinecss box-shadow syntaxcss shadow effectsweb design csscss design tools

Adding depth to a flat interface is one of the quickest ways to improve visual hierarchy. CSS box shadows let you do exactly that — without images, without JavaScript, and without leaving your stylesheet. This guide covers everything from basic syntax to multi-layer techniques, along with a free browser-based generator you can use right now.

What Is CSS box-shadow?

The box-shadow property applies one or more shadow effects to an element’s box. Unlike text-shadow, which targets text content, box-shadow wraps the entire element — its border, padding, and content area.

Browser support is universal. Every modern browser has supported box-shadow since 2012, so there are no compatibility concerns.

The box-shadow Syntax

The full syntax for a single shadow layer is:

box-shadow: [inset] offsetX offsetY [blurRadius] [spreadRadius] color;

Breaking down each value:

offsetX — How far the shadow is shifted horizontally. Positive values move it right; negative values move it left. Required.

offsetY — How far the shadow is shifted vertically. Positive values move it down; negative values move it up. Required.

blurRadius — Controls how soft the shadow edge is. A value of 0 produces a sharp, hard shadow. Higher values create a progressively softer blur. Cannot be negative. Optional (defaults to 0).

spreadRadius — Expands or contracts the shadow before blurring. A positive value makes the shadow larger than the element; a negative value shrinks it. Optional (defaults to 0).

color — The shadow colour, including transparency via rgba() or hsla(). Optional (defaults to the element’s color value, but explicitly setting it is strongly recommended).

inset — An optional keyword that flips the shadow from outside the element to inside it, creating a recessed or pressed effect.

A practical example:

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

This is a two-layer shadow: a larger, softer layer for ambient depth, and a smaller, sharper layer for direct light — a pattern popularised by Tailwind CSS.

Multi-Layer Shadows

CSS allows you to stack multiple shadow layers by separating them with commas. Layers are rendered front to back — the first layer in the list appears on top.

Multi-layer shadows unlock effects that a single shadow cannot achieve:

  • Stacked depth — combine a wide soft shadow with a tight sharp one for realistic elevation
  • Coloured glows — use bright, blurred shadows with rgba colours for neon effects
  • Neumorphism — pair a light shadow (top-left) with a dark shadow (bottom-right) to create the popular soft-UI look
  • Simulated borders — use 0 0 0 Xpx color (zero offsets, zero blur, spread only) to add a non-layout border or focus ring

Inset Shadows

Adding inset as the first keyword changes the shadow from an outer drop-shadow to an inner shadow. The element appears pressed into the page rather than lifted above it.

Inset shadows are ideal for:

  • Input fields that look “sunken” into the UI
  • Pressed button states
  • Troughs, wells, and container depth effects
/* A sunken input field */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

You can mix inset and non-inset layers in the same declaration for compound effects.

Performance Considerations

Box shadows are composited on the GPU in modern browsers, meaning they are generally cheap to animate. However, a few rules keep performance smooth:

Animate box-shadow carefully. Changing box-shadow during transitions forces a repaint on every frame. A better pattern is to animate opacity on a pseudo-element (::after) that already has the target shadow applied.

Limit extreme blur values on large elements. Very high blur radii on full-width sections can increase paint times, especially on mobile. Test on real devices if you use blur values above ~50px on large containers.

Prefer rgba for colour. Opaque shadows (e.g. box-shadow: 2px 2px 4px #000000) look harsh against non-white backgrounds. Semi-transparent colours blend naturally with any background and look more professional.

Common Presets Worth Knowing

A few widely-used shadow patterns worth having in your toolkit:

Subtle card lift: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)

Medium elevation: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)

Deep drop: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)

Neon glow (blue): 0 0 10px rgba(99,102,241,0.6), 0 0 30px rgba(99,102,241,0.3)

Sharp (no blur): 4px 4px 0 0 #1a1a1a — popular in neo-brutalist design

Neumorphism: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff (works on light grey backgrounds only)

How to Use a Box Shadow Generator Online

Crafting multi-layer shadows by hand involves a lot of trial and error. A visual generator lets you tune each parameter with sliders and see the result in real time — far faster than editing a stylesheet and refreshing the browser.

The CSS Box Shadow Generator on FreeToolBox runs entirely in your browser. No sign-up, no data sent anywhere. Here is how to use it:

  1. Open the tool at freetoolbox.org/tools/css-box-shadow-generator.
  2. Choose a preset — Subtle, Medium, Deep, Sharp, Dreamy, Neumorphism, Layered, Inset, or Neon Glow — as a starting point, or start with a blank layer.
  3. Add and configure layers. Each layer has its own offsetX, offsetY, blur, spread, colour, opacity, and inset toggle. Adjust them with sliders and watch the live preview update instantly.
  4. Change the preview background to match your target surface — shadows look very different on white, grey, or dark backgrounds.
  5. Copy the CSS output with one click. Paste it directly into your stylesheet.

The generator supports any number of stacked layers, so you can build the exact effect you need — from a simple lift to a complex neon glow — without writing a single line of code by hand.

Try It Now

Build your shadow visually — no installs, no account, nothing stored.

Open the free CSS Box Shadow Generator and start designing in seconds.