What is an inset box shadow?

An inset shadow is drawn inside the element's border instead of outside it, which creates a pressed, recessed, or inner-glow effect rather than a lifted card look.

Why is opacity a separate slider?

Real shadows are rarely solid black. Lowering opacity lets the background show through for a softer, more natural result, a subtle dark shadow often looks better than a heavy one.

Is anything saved or uploaded?

No. The tool runs entirely in your browser, nothing is sent to a server.

Box Shadow Generator

Craft the perfect CSS box shadow with live sliders and one-click CSS.

Horizontal offset: 0px

Vertical offset: 8px

Blur radius: 24px

Spread radius: 0px

Shadow color: #000000

Opacity: 25%

Inset (inner shadow)

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);

Everything runs in your browser, nothing is sent or stored anywhere.

About this tool

Subtle shadows give interfaces depth: cards lift off the page, buttons feel clickable, and modals separate from the content behind them. The JoliTools Box Shadow Generator lets you dial in that effect visually with sliders for horizontal and vertical offset, blur, spread, color, and opacity, plus an inset toggle for inner shadows.

A live preview box updates with every adjustment, so you see the exact result before touching your code. The generated box-shadow declaration uses standard CSS with an rgba() color that respects your chosen opacity, and copies in one click to paste into any stylesheet.

How to use the box shadow generator

1Move the offset sliders to position the shadow.
2Adjust blur radius for softness and spread for size.
3Pick a shadow color and set its opacity.
4Enable Inset for an inner shadow instead of an outer one.
5Click Copy CSS and paste the box-shadow rule into your stylesheet.

Good to know

The tool is free, private, and runs fully client-side. Whether you want a barely-there card shadow or a dramatic hover effect, you can iterate visually instead of guessing pixel values by hand.

Frequently asked questions

Blur radius controls how soft the shadow's edge is, higher values make it more diffused. Spread expands or contracts the shadow's overall size before blur is applied.

More free tools you might find useful.

New