Box Shadow Generator

Designer Tools

Create CSS box shadows with sliders and a live preview, then copy the code — free online.

Horizontal offset: 0 pxVertical offset: 10 pxBlur radius: 25 pxSpread radius: -5 pxOpacity: 25 %

Shadow colourInset shadow

Presets

CSS

This tool needs JavaScript enabled in your browser to work.

About

About the Box Shadow Generator

Builds a CSS box-shadow from sliders for horizontal and vertical offset, blur, spread, colour and opacity, with a live preview and the finished CSS ready to copy.

Designers use it to find a shadow that gives a card or button just the right amount of depth, while front-end developers use it to get the exact box-shadow value instead of guessing numbers in the stylesheet. It's one of many free designer tools on Toolapt, and like every tool here, it's free to use with no sign-up and no limit on how many times you run it.

Guide

Using the Box Shadow Generator

How to use 4 Features 7 Who uses this 4

1

Step 1

Drag the sliders to set the horizontal and vertical offset, blur and spread.
2

Step 2

Pick a shadow colour and set its opacity, or turn on Inset for an inner shadow.
3

Step 3

Try a preset — Soft, Medium, Large or Sharp — as a starting point.
4

Step 4

Copy the box-shadow CSS when the preview looks right.

Sliders for horizontal offset, vertical offset, blur radius, spread radius and opacity, each showing its current value
Any shadow colour, output as rgba() so the opacity is built in
Inset option for inner shadows
Four presets — Soft, Medium, Large and Sharp — plus a one-click Reset
Live preview on a card, updated as you drag
Works entirely in your browser — no installs and no sign-up
Free to use, with no limit on how many times you run it

UI designers

UI designers use the Box Shadow Generator for finding a subtle elevation for cards, menus and modals.

Front-end developers

Front-end developers use the Box Shadow Generator for getting an exact box-shadow value to paste into CSS or a design token.

Website builders

Website builders use the Box Shadow Generator for adding depth to buttons and pricing boxes without writing CSS from scratch.

Students learning CSS

Students learning CSS use the Box Shadow Generator for seeing what each of the box-shadow values actually does.

Examples

Box Shadow Generator examples

3 worked examples

The Medium preset

Copies as box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25); — a soft shadow that sits mostly below the card.

A hard, flat shadow

The Sharp preset copies as box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1); — a solid offset shadow with no blur, popular in retro and brutalist designs.

An inner shadow

Turning on Inset with the default values copies as box-shadow: inset 0px 10px 25px -5px rgba(0, 0, 0, 0.25); and makes the card look pressed in.

Border Radius Generator

Set each corner's CSS border-radius with sliders, preview the shape and copy the shortest CSS.

Use it

Colour Palette Generator

Build a palette from a base colour using classic colour-wheel relationships.

Use it

Colour Converter

Convert between HEX, RGB, HSL, HSV and CMYK. Named CSS colours work too.

Use it

Colour Blindness Simulator

Preview a photo as it might look under common types of colour vision deficiency.

Use it

Image Colour Palette Extractor

Pull the dominant colours out of a photo, with HEX codes ready to copy.

Use it

Colour Contrast Checker

Check the WCAG contrast ratio between a text colour and a background colour.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the Box Shadow Generator.

Still have a question?

Send us a message and we'll help you out.

What does the Box Shadow Generator do?

It lets you design a CSS box-shadow with sliders and a live preview, then gives you the box-shadow line to paste into your stylesheet.

What do the four box-shadow numbers mean?

In order: horizontal offset (positive moves the shadow right), vertical offset (positive moves it down), blur radius (higher is softer) and spread radius (positive grows the shadow, negative shrinks it).

What does inset do?

It draws the shadow inside the element instead of outside it, which makes the element look pressed in — useful for input fields and pressed buttons.

Why use a negative spread?

A negative spread shrinks the shadow before it's blurred, so it only shows below the element instead of all around it. Most soft, modern card shadows use a slightly negative spread.

Can I use more than one shadow?

CSS allows several shadows separated by commas. This tool builds one at a time — generate each layer and join them with a comma, for example box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 10px 25px -5px rgba(0,0,0,.25);.

Is the Box Shadow Generator free to use?

Yes. It's free, with no sign-up, no watermark and no limit on how many times you use it.

Is my input safe when I use this tool?

Yes. The shadow is built and previewed entirely on your own device — nothing is sent to a server.

Still have a question? Contact us

Box Shadow Generator

About the Box Shadow Generator

Using the Box Shadow Generator