JustFreeTools.
◎   English
EnglishEspañolالعربية
← All tools
Developer

CSS box-shadow generator — live preview & copy

Create a CSS box shadow with a live preview. Adjust offsets, blur, spread, color and opacity, try presets or inset shadows, then copy the CSS. Free.

● Your files stay yours

Loading converter…

-100 … 100
-100 … 100
0 … 100
-100 … 100
0 … 100

Live shadow preview

Preview uses a white rounded box on a light background. Large shadows may be clipped at the preview boundary; the CSS keeps the full values.

Paste inside a selector, for example .card { … }. Preview size, background and border radius are not included.

How to use this tool

Choose a preset, then edit the shadow settings. The preview and CSS update as you type. Use negative offsets to move the shadow left or up, and enable Inset for an inner shadow. Copy the declaration into your CSS rule. Reset restores the soft preset.

Good to know

One shadow per declaration. Whole-number pixels: offsets and spread from -100 to 100; blur from 0 to 100; opacity from 0 to 100%. HEX colors use 3 or 6 digits with an optional #. Arabic/Persian digits are supported. No multiple layers, text shadows, image export or CSS import. Inputs remain in memory and are not uploaded or saved.

More useful tools

CSS gradient generator — linear & radial backgrounds

Create linear and radial CSS gradients with a live preview. Choose 2–5 colors, edit stop positions, reverse colors, try presets, and copy or download CSS. Free.

Developer

Color converter — HEX, RGB & HSL

Convert HEX to RGB and HSL, RGB to HEX, or HSL to RGB. Paste a color code or use the picker, preview the color, and copy each format. Free and browser-only.

Developer

Color contrast checker — WCAG AA & AAA

Check text and background color contrast for WCAG AA and AAA. Enter HEX colors, preview your text and copy the results. Free, private and browser-only.

Developer

How CSS box shadows work

The declaration below uses horizontal offset, vertical offset, blur, spread and color, in that order. The alpha value 0.22 means 22% opacity. A negative spread makes the shadow smaller, while blur softens its edges.

box-shadow: 0px 12px 28px -6px rgba(0, 0, 0, 0.22);

Box-shadow questions

What is the difference between blur and spread?

Blur softens the edge and cannot be negative. Spread expands the shadow when positive and shrinks it when negative. With zero blur, the shadow has a sharp edge.

How do I make an inner shadow?

Enable Inset or choose the Inner shadow preset. The inset keyword moves the shadow inside the element instead of outside it.

Why is my shadow invisible?

Opacity 0 is transparent. A shadow with zero offset, blur and spread can sit directly behind the element. A large negative spread can also make an outer shadow disappear.

Does box-shadow affect element size?

No. A box shadow does not take up layout space. An ancestor with overflow clipping can hide part of it, and rounded corners change its outline.

Can I create multiple shadows or a text shadow?

This tool generates one box shadow. CSS supports comma-separated shadow layers, but layer editing is not included here. Text uses the separate text-shadow property.