Developer

CSS BOX SHADOW

Create and preview CSS box shadows with offset X/Y, blur, spread, color, opacity, and inset controls.

Shadow Layers

Layer 1

Inset

Offset X0

Offset Y0

Blur0

Spread0

Opacity100

Background

Shape

Presets

Shadow Library

No saved shadows yet.

Preview

CSS Output

Normal Hover

box-shadow: ...;

Animate Preview

Toggles between Normal and Hover shadow states to simulate a hover transition.

Frequently Asked Questions

How does the CSS Box Shadow Generator work?

Use the sliders and color picker to set the offset X, offset Y, blur radius, spread radius, color, and opacity of your box shadow. The preview updates in real-time. When you are happy, copy the CSS with one click.

Is the CSS Box Shadow Generator free to use?

Yes, it is completely free with no hidden fees, subscriptions, or usage limits. No sign-up or account required.

What is the difference between outset and inset shadow?

Outset shadows appear outside the element, casting a drop shadow. Inset shadows appear inside the element, creating a recessed or inner shadow effect. Toggle the inset switch to see both in real-time.

Can I copy the shadow as Tailwind CSS?

Yes, click the Tailwind button to copy a commented Tailwind-compatible shadow class hint alongside the raw CSS value.

Does this tool support multiple shadow layers?

The current version supports a single shadow layer. Multi-layer support with drag-to-reorder is planned for a future update.

What browser do I need?

Any modern browser (Chrome, Firefox, Safari, Edge). All processing happens locally in your browser using canvas APIs.

Can I save my shadow settings?

The tool includes preset shadows you can load with one click. You can also copy the CSS directly and paste it into your project.

How to Use

Adjust Shadow Controls

Use the X and Y sliders to position the shadow, blur to soften it, and spread to expand it.

Choose a Color

Pick a shadow color using the color picker and adjust opacity for subtle or dramatic effects.

Toggle Inset

Switch between outset (default) and inset shadow to create inner or outer depth effects.

Preview

Watch the live canvas preview update instantly as you adjust any control.

Export

Copy the CSS box-shadow value, or get a Tailwind-compatible hint for your project.

How to Calculate

The CSS Box Shadow Generator creates standard CSS box-shadow property values by combining the user's offset, blur, spread, color, and opacity inputs into a properly formatted CSS string. The preview is rendered using the Canvas 2D API to display the shadow in real-time against a configurable background.

About the CSS Box Shadow Generator

The CSS Box Shadow Generator is a free online tool for creating, previewing, and exporting CSS box shadows. Adjust offset X, offset Y, blur radius, spread radius, color, and opacity using intuitive sliders and a color picker. Toggle between outset and inset shadows, and preview the result on a live canvas.

Built with privacy in mind, all processing happens directly in your browser. No sign-up required, no data stored, no tracking. Simply open the tool, adjust your settings, and copy the ready-to-use CSS code.

Export as raw CSS or get a Tailwind-compatible hint. Choose from preset shadows to get started quickly. Perfect for frontend developers, UI designers, and anyone building web interfaces.

Related Tools

Color Palette Generator

JSON Formatter & Validator