CSS Shadows

Shadows in CSS can be used to add depth and dimension to elements on your webpage, creating a more engaging and modern look. There are two main types of shadows: text shadows and box shadows.

Box Shadow

The box-shadow property applies shadows to an element’s entire box (including padding and border).

Syntax:

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

Example:

div { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }

This creates a shadow 5px to the right, 5px down, with a blur of 10px and a semi-transparent black color.

Use Cases:

Adding depth to buttons, cards, or containers.
Simulating a 3D effect on flat elements.

Text Shadow

The text-shadow property is used to add shadows to text. It’s a great way to make text stand out or create interesting effects.

Syntax:

text-shadow: offset-x offset-y blur-radius color;

Example:

h1 { text-shadow: 2px 2px 5px #999; }

This will add a subtle gray shadow to the text, making it appear elevated.

Use Cases:

Highlighting headings or call-to-actions.
Adding dramatic or artistic effects to text

Request more information

CSS Shadows