CSS Box Shadow

button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

Let me ask you something.

Have you ever noticed that cards on modern websites seem to float slightly above the background? That buttons feel like they have a little bit of weight to them? That certain sections feel closer to you than others?

That feeling of depth is not magic. It is box shadow. And once you understand it, you will see it everywhere.

What is Box Shadow

Box shadow adds a shadow behind an element. It works just like a real shadow — a light source above your element casts a shadow below it, giving the element the illusion of being lifted off the page.

Here is the basic syntax.

box-shadow: offset-x offset-y blur color;

offset-x — how far the shadow moves left or right. Positive values push it right, negative values push it left.

offset-y — how far the shadow moves up or down. Positive values push it down, negative values push it up.

blur — how soft or sharp the shadow is. 0 is a hard shadow. Higher values make it softer and more spread out.

color — the color of the shadow. Usually a dark semi-transparent RGBA value.

The card now appears to float slightly above the background. That single line of CSS creates the illusion of depth.

Adjusting the Blur

The blur value is what makes the biggest difference to how a shadow feels. A low blur creates a sharp, dramatic shadow. A high blur creates a soft, subtle glow.

Sharp and defined. Now try a higher blur.

Softer and more spread out. This is the style used on most modern cards — a large blur with a low opacity gives a gentle, realistic shadow.

The Spread Value

There is an optional fourth value before the color — the spread. It controls how large the shadow grows beyond the element itself. Positive spread makes the shadow bigger. Negative spread shrinks it.

box-shadow: offset-x offset-y blur spread color;

The shadow now extends slightly further out from all sides of the card. This is useful when you want the shadow to feel more like a glow than a directional light source.

Shadows on Buttons

Buttons with shadows feel more physical and clickable. They look like something you can actually press.

Notice how the shadow color matches the button color — a semi-transparent red. This is called a colored shadow, and it makes the button feel like it is glowing slightly. You will see this pattern on call-to-action buttons everywhere.

Inset Shadows

Adding the word inset at the start of a box-shadow flips it inside the element instead of outside. This creates a pressed-in effect rather than a lifted effect.

The input field now looks slightly recessed into the page. This is a subtle but effective way to make form fields feel more tactile and intentional.

Multiple Shadows

You can layer multiple shadows on a single element by separating them with commas. This is how designers create rich, realistic depth effects.

The first shadow is small and close — it defines the crisp edge of the element. The second is large and soft — it creates the feeling of elevation. Together they produce a much more natural and polished shadow than a single value ever could.

Building the Netflix Clone

Let us add some depth to our Netflix clone. A shadow on the sign-in button and a subtle lift on the input and submit button will make everything feel more designed.

The Get Started button now glows with a red shadow that matches its color. The input has a subtle inset shadow making it feel recessed. Small details, but they push the whole thing closer to a real production design.