CSS Box Shadow Generator

Design layered shadows visually with MiniWebtool’s CSS Box Shadow Generator. Adjust individual layers or try presets, inspect the live effect, and copy the resulting box-shadow CSS into your stylesheet.

Need help using this tool? Ask AI

Gemini (copy & open)

For Gemini, paste the copied question into the chat. You can also copy it below.

View the question

Help me understand MiniWebtool's CSS Box Shadow Generator: https://miniwebtool.com/css-box-shadow-generator/. What can I use it for, what inputs or settings do I need, and how do I use it and understand the output? Walk me through one simple example. Use this page as your source and answer in English.

Free to useNo sign-up requiredInstant Results

CSS Box Shadow GeneratorTry it now — free ▼

Quick Examples:

Live Preview

↕ Drag to set offset

Shadow Layers

Layer Settings

X Offset px

Y Offset px

Blur px

Spread px

Color

Opacity %

Inset Shadow

Curated Presets

Generated CSS

Embed CSS Box Shadow Generator Widget

About CSS Box Shadow Generator

The CSS Box Shadow Generator lets you visually design box-shadow effects and instantly copy production-ready CSS. Stack multiple shadow layers, choose from curated presets inspired by Material Design, Tailwind CSS, and Neumorphism, or drag directly on the preview to position your shadow. Everything runs in your browser — your code never leaves the page.

At a Glance

CSS Box Shadow Generator lets you design box-shadow effects visually and copy the resulting CSS. You can stack several shadow layers, start from presets and see the effect on a live preview.

CSS Box Shadow Generator: features at a glance
Feature	What you get	Good for
Shadow controls	Sliders set horizontal and vertical offset, blur radius and spread radius, and you can drag on the preview to position the shadow.	Fine-tuning a card or button shadow
Multiple layers	Add shadow layers with + Add Shadow Layer; layers are written as comma-separated shadows in one box-shadow value.	Building realistic depth from ambient and key shadows
Presets	Start from presets such as Subtle Card, Material Elevated, Neumorphism, Dramatic Drop and Color Glow.	Starting from a proven look and adjusting it
Color and opacity	Pick a color with a color picker or hex value and set its opacity.	Tinted shadows that match an element's background
Inset toggle	Switch a layer to inset to draw the shadow inside the element.	Pressed buttons and recessed input fields
Preview shapes	Preview the shadow on different shapes and backgrounds, then copy the CSS with one click.	Checking a shadow on light and dark surfaces before pasting it

How to Use the CSS Box Shadow Generator

Adjust shadow controls — Use the sliders to set horizontal offset (X), vertical offset (Y), blur radius, and spread radius. You can also drag directly on the preview area to reposition the shadow intuitively.
Choose color and opacity — Pick a shadow color with the color picker and fine-tune transparency with the opacity slider. The preview updates in real time.
Add multiple layers or presets — Click + Add Shadow Layer to stack shadows for realistic depth. Or select a curated preset (Material, Tailwind, Neumorphism, etc.) to start with a proven design.
Copy the CSS — Click Copy to grab the generated box-shadow code and paste it directly into your stylesheet.

Understanding the box-shadow Syntax

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y

Horizontal and vertical displacement of the shadow. Positive values move right/down; negative values move left/up.

blur-radius

Controls how blurry the shadow is. 0 produces a sharp edge; higher values create a softer, more diffused shadow.

spread-radius

Expands or contracts the shadow. Positive values make it larger; negative values shrink it, useful for subtle under-element effects.

inset

When present, the shadow is drawn inside the element. Commonly used for pressed buttons and recessed input fields.

Tips for Professional Box Shadows

Layer multiple shadows — Real-world objects cast complex shadows. Using 2-3 layers (a soft ambient layer + a sharper key light layer) produces much more realistic results than a single shadow.
Use low opacity — Shadows with 8-20% opacity look natural. Avoid high-opacity black shadows, which can appear harsh and dated.
Match light direction — Keep shadow offsets consistent across your UI to simulate a single light source. Inconsistent shadows break the visual illusion.
Colored shadows — Instead of black, try using a darker shade of the element's background color for a more cohesive, modern look.
Negative spread — A negative spread value shrinks the shadow smaller than the element, creating a subtle contact shadow that grounds elements without visible edges.

Popular Shadow Styles Explained

Material Design Elevation — Uses two shadow layers: a softer ambient shadow and a sharper key shadow. Different elevation levels (1-5) increase the offset and blur progressively.
Tailwind CSS Utilities — Tailwind provides shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl classes, each using two-layer shadows optimized for common card and modal use cases.
Neumorphism — Creates a soft, extruded plastic effect using two opposing shadows (one light, one dark). Works best on light gray backgrounds where both shadows are visible.
Glassmorphism — Pairs a subtle shadow with backdrop-filter blur and semi-transparent backgrounds. The shadow adds depth beneath the frosted glass effect.

Frequently Asked Questions

What is the CSS box-shadow property?

The CSS box-shadow property adds shadow effects around an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be comma-separated to create layered depth effects.

How do I create multiple box shadows in CSS?

Multiple box shadows are created by comma-separating each shadow definition. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Each shadow is rendered on top of the previous one, with the first shadow appearing on top.

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

box-shadow applies shadow to the rectangular box of an element, while filter: drop-shadow() follows the actual shape including transparent areas. box-shadow supports spread radius and inset mode, which drop-shadow does not. For standard rectangular elements, box-shadow is more commonly used and performs better.

What is an inset box shadow?

An inset box shadow appears inside the element instead of outside. It is created by adding the inset keyword before the shadow values. Inset shadows are commonly used for pressed button effects, input field styling, and creating recessed or engraved appearances.

What are good box-shadow values for a subtle card effect?

A popular subtle card shadow uses two layers: 0 1px 3px rgba(0,0,0,0.12) for the close shadow and 0 1px 2px rgba(0,0,0,0.24) for definition. Tailwind CSS uses 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) for its default shadow utility.

Reference this content, page, or tool as:

"CSS Box Shadow Generator" at https://MiniWebtool.com/css-box-shadow-generator/ from MiniWebtool, https://MiniWebtool.com/

by miniwebtool team. Updated: 2026-03-07

Developer API available: Run this tool from your app, automation, or agent with one JSON HTTP request. View API docs

Chat with your favorite AI