Skip to content

Box Shadow Generator – Layered CSS Box Shadows

Stack shadow layers, fine-tune offset, blur, spread and opacity, and preview the result on a box with your own colours and corner radius.

Preview

Box

Corner radius16px

Shadow layers

The first layer is drawn on top. Up to 6 layers.

Layer 1

Horizontal offset0px
Vertical offset1px
Blur2px
Spread0px
Opacity8%

Presets

CSS code

box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.08), 0 8px 24px -4px rgb(15 23 42 / 0.18);

Tailwind class

An arbitrary-value class for Tailwind CSS: spaces become underscores.

shadow-[0_1px_2px_0_rgb(15_23_42_/_0.08),0_8px_24px_-4px_rgb(15_23_42_/_0.18)]

How to use the box shadow generator

  1. Start from a preset such as Soft, Raised, Smooth layers, Hard offset, Glow or Pressed – or keep the default.
  2. Pick a layer with the numbered buttons under Shadow layers, then adjust Horizontal offset, Vertical offset, Blur, Spread, Colour and Opacity. Switch on Inset (inner shadow) for a recessed look.
  3. Add layer stacks another shadow; the arrow buttons reorder layers and the cross removes one.
  4. Match your design under Box: set the Box colour, Background colour and Corner radius so the preview looks like your page.
  5. Press Copy CSS, or Copy class for the Tailwind version, and paste it into your project.

Features

  • Up to six shadow layers, each with offsets from −100 to 100 pixels, blur up to 150 pixels and spread from −50 to 100 pixels.
  • Colour in HEX, rgb() or hsl(), with a separate opacity slider that is combined with any transparency in the colour.
  • Inset shadows, and inset and outer layers mixed in one declaration.
  • Preview on your own box colour, background colour and corner radius.
  • Six original presets, from a subtle card shadow to a coloured glow and a retro hard offset.
  • Tidy output: zero values written as 0 and colours as rgb() with a slash for transparency.
  • A Tailwind CSS arbitrary-value class generated from the same shadow.

Tips for natural-looking shadows

Light usually comes from above, so most shadows look right with a horizontal offset of 0 and a small positive vertical offset. Keep the opacity low – between 8% and 20% for everyday interface shadows – and use a dark blue-grey rather than pure black, which can look muddy on coloured backgrounds.

For elevation, make the shadow larger and softer the higher the element should appear. A card resting on the page might use a 1px and an 8px layer; a dialog floating above everything might use layers up to 32px or more. A small negative spread keeps large blurs from spilling out to the sides.

Coloured glows work best on dark backgrounds. Use the element's own brand colour, an offset of 0, a generous blur and a little spread. If the element also has a gradient, build it in the CSS gradient generator and take one of its colours for the glow.

Box shadows and rounded corners

The shadow follows the element's border radius automatically, which is why the preview has a Corner radius slider. If you are preparing images for a page rather than CSS boxes, round image corners gives a picture the same rounded shape. To convert a colour from a design file into a format you prefer, use the colour converter.

Why use Fileora's box shadow generator

Tweaking box-shadow numbers in a stylesheet is slow, especially with several layers. Here every slider updates the preview instantly, you can compare presets with one click, and the CSS is always in sync with what you see. It is free, needs no account, works on mobile and runs entirely in your browser.

Frequently asked questions

What do offset, blur and spread mean?

The horizontal and vertical offsets move the shadow right or down; negative values move it left or up. Blur softens the edge – 0 gives a sharp shadow and larger values fade it out over more pixels. Spread grows or shrinks the shadow before it is blurred, so a negative spread gives a tighter shadow that stays tucked under the box.

Why use more than one layer?

Real shadows are soft near the object and fade gradually further away. Stacking a small, tight shadow with one or two larger, fainter ones imitates that and looks far more natural than a single big blur. Try the Smooth layers preset to see the effect.

Which layer is drawn on top?

The first layer in the list. That is how CSS works: in a box-shadow value with several shadows, the first one is painted on top of the others. Use the up and down arrow buttons to change the order.

What does inset do?

An inset shadow is drawn inside the box instead of outside it, which makes the element look pressed in or recessed. It is often used for input fields, toggles and pressed button states. You can mix inset and normal layers in the same shadow.

How do I use the Tailwind class?

Copy it and add it to the element's class list. It uses Tailwind's arbitrary value syntax, shadow-[...], where spaces inside the brackets are written as underscores. It works in Tailwind CSS v3 and v4 without changing your config.

Why does my shadow look different in dark mode?

Dark shadows are hard to see on dark backgrounds. Change the Background colour in the preview to your dark theme's colour to check, and consider a lighter or coloured shadow, a border, or a slightly lighter box colour instead.

Is my design stored anywhere?

No. The preview and the code are produced in your browser. Nothing is uploaded, and the settings disappear when you leave the page.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.