Bartel Media BoxShadow
CSS Tool

Free Box-Shadow Generator

Create CSS box-shadow values visually with live preview. Adjust offset, blur, spread and color with sliders — copy the ready-to-use CSS in one click. Free, no signup.

5px
5px
10px
0px
80%
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.8);
01 — The basics

What is CSS box-shadow?

The CSS box-shadow property lets you add one or more shadow effects around an element's frame. It accepts values for horizontal offset (X), vertical offset (Y), blur radius, spread radius and color — giving you fine-grained control over how a shadow looks and feels.

Shadows are one of the most powerful tools for creating depth and hierarchy in a UI. A subtle shadow lifts a card off the page; a harder shadow signals interactivity; an inset shadow makes an element look pressed in. Getting the values right by hand can be tedious — this generator lets you dial them in visually and copy the result instantly.

/* Soft drop shadow */
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.12);

/* Hard brand shadow (Bartel Media style) */
box-shadow: 4px 4px 0 0 rgba(26,13,7,1);

/* Inset glow */
box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.2);
02 — How to use it

How to use this generator

  1. 1

    Adjust the sliders

    Use X Offset and Y Offset to control the shadow direction. Increase Blur for soft shadows or keep it at 0 for a sharp hard shadow. Spread expands or shrinks the shadow size.

  2. 2

    Pick a color and opacity

    Click the color swatch to open the color picker. Use the Opacity slider to control transparency — lower values give softer, more subtle shadows.

  3. 3

    Toggle Inset if needed

    Check "Inset shadow" to flip the shadow to the inside of the element — useful for pressed states, input fields and sunken UI elements.

  4. 4

    Copy the CSS

    The generated CSS updates live in the code block below the preview. Hit "Copy CSS" to grab it and paste it directly into your stylesheet.

03 — FAQ

Frequently asked questions

What is CSS box-shadow? +

The CSS box-shadow property adds shadow effects around an element. You can set offset, blur, spread and color.

Can I add multiple shadows? +

Yes. Click "Add Shadow" to layer multiple box-shadows on the same element.

Does it work for inset shadows? +

Yes. Toggle the "Inset" checkbox to create inner shadows.

Is the output ready to copy? +

Yes. Click Copy to get the complete CSS property ready to paste.