256 Tools

CSS Box Shadow Generator

Live preview
Preview
Presets

Shadow layers

Layer 1

At least one layer is required.

CSS output

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);

Related external tools

Some links are affiliate links.

Adobe Creative CloudA subscription that bundles over 20 creative apps including Photoshop, Illustrator, Premiere Pro, and After Effects. Includes cloud storage and access to Adobe Fonts and Stock. The go-to toolkit for professional creatives.CanvaA popular drag-and-drop design platform for creating social media posts, presentations, posters, and more. Offers a massive library of free and premium templates, photos, and graphics. No design experience needed to get started.

Related tools

Color Palette GeneratorGenerate harmonious color palettes from a base HEX using complementary, analogous, triadic and more schemes. Lock colors, reshuffle the rest, and export to CSS variables, Tailwind or JSON.Gradient GeneratorCreate linear, radial and conic CSS gradients with multiple color stops. Adjust angle, shape and center, then copy the background CSS or Tailwind value in one click.Font Pairing ToolFind curated Google Fonts heading × body pairings, preview them live, and copy the CSS in one click.Color ConverterConvert any color between HEX, RGB, HSL, HSV and RGBA at once. Edit any value, copy with one click, with alpha and WCAG contrast.

Design a CSS box-shadow visually and copy the code in one click. Drag the sliders to set the offset, blur, spread, color and opacity while a large live preview updates instantly. Stack several shadow layers, switch any layer to an inset (inner) shadow, and start from ready-made presets. Everything runs in your browser — nothing is uploaded.

How to use

  1. Move the Offset X/Y, Blur and Spread sliders while watching the live preview.
  2. Pick a shadow color and adjust its opacity.
  3. Add more layers for depth, or turn a layer into an inset (inner) shadow.
  4. Copy the box-shadow CSS, or switch to the Tailwind tab for a utility value.

Understanding box-shadow properties

A CSS box-shadow is written as: offset-x, offset-y, blur, spread, color — with an optional inset keyword. You can list several shadows separated by commas.

Diagram showing how offset, blur and spread affect a box shadowoffset X/Yblurspread

Offset X & Y

Offset X moves the shadow horizontally, Offset Y vertically. Positive values push the shadow right and down; negative values push it left and up.

Blur radius

Blur softens the shadow's edges. 0 gives a hard, crisp edge; larger values create a soft, diffuse shadow. It cannot be negative.

Spread radius

Spread grows (positive) or shrinks (negative) the shadow before the blur is applied. A small negative spread is handy for subtle, tight shadows.

Inset (inner shadow)

The inset keyword draws the shadow inside the element instead of outside, which is great for pressed buttons, input fields and inner depth.

Color & opacity

Shadows usually look best as a semi-transparent dark color rather than solid black. Lower the opacity for a natural, realistic effect.

Features

Multiple shadow layers

Stack several shadows on one element. Layering a tight, dark shadow with a wider, softer one is the secret behind realistic, polished depth.

Inset shadows

Toggle any layer to an inner shadow to create pressed, carved or recessed effects — perfect for buttons and form fields.

Ready-made presets

Start from Material elevation levels, soft and hard shadows, neumorphism or a colored glow, then fine-tune to taste.

Light & dark preview

Switch the preview background between light and dark to check how your shadow reads on different surfaces.

One-click copy (CSS or Tailwind)

Copy a ready-to-paste box-shadow declaration, or grab a Tailwind arbitrary value like shadow-[…] for utility-first projects.

Common use cases

Cards & containers

Give cards a gentle lift off the page with a soft, low-opacity shadow so content feels grouped and elevated.

Buttons & hover states

Add a subtle shadow to buttons, then a larger one on hover, or an inset shadow to make a button feel pressed.

Neumorphism

Combine a light shadow and a dark shadow on opposite sides to get the soft, extruded neumorphic look.

Glow & focus rings

Use a colored shadow with zero offset and some spread to create a glow or an accessible focus highlight.

Notes & tips

  • Many large, blurred shadows can affect rendering performance — use them sparingly on animated or scrolling elements.
  • Very large blur values are the most expensive to paint; prefer layering smaller shadows for realism.
  • Keep enough contrast so shadows stay subtle and don't hurt readability.
  • Inset shadows are drawn inside the element, so they won't extend past its border box.

Frequently asked questions

What's the difference between box-shadow and filter: drop-shadow?
box-shadow follows the element's rectangular border box (respecting border-radius), while drop-shadow follows the actual shape, including transparent PNGs and irregular shapes. This tool generates box-shadow.
Can I add multiple shadows to one element?
Yes. CSS lets you list several shadows separated by commas, and this generator lets you stack multiple layers. Combining shadows is the key to realistic depth.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside. It's useful for pressed buttons, input fields and recessed surfaces. Toggle the Inset option on any layer.
Do box-shadows slow down my page?
A few static shadows are fine. Large, heavily blurred shadows are more expensive to paint, so use them carefully on animated or frequently repainted elements.
Is my data uploaded?
No. The generator runs entirely in your browser. Nothing is sent to a server, and there is no sign-up.

We use cookies for ads and analytics.