CSS Box Shadow Generator

Build CSS box-shadow with live preview, presets, offset, blur, spread, color, opacity, and inset shadows.

For this tool, processing runs locally in your browser and data is not sent to the server.

CSS Box Shadow Generator is a free online tool for creating CSS box-shadow values with a live preview. Adjust X/Y offset, blur, spread, color, opacity, inset mode, and shadow presets, then copy CSS, a CSS variable, inline style, or a Tailwind arbitrary class. Processing runs locally in your browser, and data is not sent to the UtiLab server.

What it does

Output

Processing

Continue working

Choose a related tool for the next step.

TCharacter Counter

Open

MSEO Title Length Checker

Open

TMask Email

Open

Data passed between tools is kept only in the current browser session.

How to use

Set X and Y offset, blur, spread, color, and shadow opacity.
Check the result on the live card preview.
If needed, pick a preset: card, button, modal, inset, or neumorphism.
Copy the ready-made box-shadow rule, CSS variable, or Tailwind class.
Paste the code into your CSS, component, or design system.

More about this tool

The CSS Box Shadow Generator helps you quickly build a CSS shadow for cards, buttons, modals, panels, and other UI elements. You can tune X and Y offset, blur, spread, color, opacity, inset mode, and multiple shadow layers. Live preview shows the result immediately, and you can copy the output as a CSS rule, box-shadow value, CSS variable, inline style, or Tailwind arbitrary class. Generation runs locally in your browser, and your data is not sent to the UtiLab server.

Runs in the browser
Data is not sent to the server
Live shadow preview
Offset, blur, spread, and color controls
Supports inset box-shadow
Presets for cards, buttons, and modals
Copy CSS, variable, or Tailwind class
No registration required

Frequently Asked Questions

How do I create a CSS box-shadow?

Set X and Y offset, blur, spread, color, and opacity. The tool shows a preview and builds the CSS rule.

What do offset X and offset Y do?

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

What is blur in box-shadow?

Blur controls how soft the shadow looks. A larger value makes the shadow softer and wider.

What is spread?

Spread expands or shrinks the shadow area. A positive value makes the shadow larger; a negative value makes it smaller.

What does inset mean?

Inset makes the shadow inner: it appears inside the element instead of outside.

Can I use multiple shadows?

Yes. CSS box-shadow supports multiple layers separated by commas. This is useful for soft cards, Material-like shadows, and neumorphism effects.

Can I copy a Tailwind class?

Yes. The tool can build a Tailwind arbitrary class such as shadow-[...] for Tailwind CSS.

Is my data sent to the server?

No. Settings and output are generated locally in your browser and are not sent to the UtiLab server.

How is box-shadow different from filter drop-shadow?

box-shadow draws a shadow around the rectangular CSS box. filter: drop-shadow() follows transparent image or SVG shapes and is used in different scenarios.

Do I need to register?

No. The tool works immediately without registration.

More about this tool

Runs in the browser
Data is not sent to the server
Live shadow preview
Offset, blur, spread, and color controls
Supports inset box-shadow
Presets for cards, buttons, and modals
Copy CSS, variable, or Tailwind class
No registration required

Frequently Asked Questions

How do I create a CSS box-shadow?

Set X and Y offset, blur, spread, color, and opacity. The tool shows a preview and builds the CSS rule.

What do offset X and offset Y do?

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

What is blur in box-shadow?

Blur controls how soft the shadow looks. A larger value makes the shadow softer and wider.

What is spread?

Spread expands or shrinks the shadow area. A positive value makes the shadow larger; a negative value makes it smaller.

What does inset mean?

Inset makes the shadow inner: it appears inside the element instead of outside.

Can I use multiple shadows?

Yes. CSS box-shadow supports multiple layers separated by commas. This is useful for soft cards, Material-like shadows, and neumorphism effects.

Can I copy a Tailwind class?

Yes. The tool can build a Tailwind arbitrary class such as shadow-[...] for Tailwind CSS.

Is my data sent to the server?

No. Settings and output are generated locally in your browser and are not sent to the UtiLab server.

How is box-shadow different from filter drop-shadow?

box-shadow draws a shadow around the rectangular CSS box. filter: drop-shadow() follows transparent image or SVG shapes and is used in different scenarios.

Do I need to register?

No. The tool works immediately without registration.