Box Shadow Basics

The box-shadow property adds shadow effects around an element's frame. Shadows create depth, lift, and separation between layers in a UI.

Syntax

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color]

offset-x / offset-y: position of the shadow. Positive values move right and down.
blur-radius: larger values create softer, more diffused shadows.
spread-radius: positive values expand the shadow, negative values shrink it.
inset: draws the shadow inside the element.

Example

/* Subtle card elevation */
.card {
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.08),
                0 1px 2px rgb(0 0 0 / 0.12);
    border-radius: 8px;
    padding: 1.5rem;
}

/* Medium elevation — floating button */
.fab {
    box-shadow: 0 4px 6px  rgb(0 0 0 / 0.10),
                0 1px 3px  rgb(0 0 0 / 0.08);
}
.fab:hover {
    box-shadow: 0 10px 20px rgb(0 0 0 / 0.15),
                0  3px  6px  rgb(0 0 0 / 0.10);
}

/* Coloured shadow for brand buttons */
.btn-primary {
    background: #1a73e8;
    box-shadow: 0 4px 14px rgb(26 115 232 / 0.45);
}

/* No shadow — flat design */
.flat {
    box-shadow: none;
}

CSS

Full Editor

Pro Tip

Use semi-transparent dark colours for shadows rather than solid black — rgb(0 0 0 / 0.1) blends with any background colour, making shadows look natural even on coloured surfaces.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned