CSS Shadows & Opacity

box-shadow

Adds a shadow around a box element.

Syntax: box-shadow: offsetX offsetY blur spread color;

text-shadow

Syntax: text-shadow: offsetX offsetY blur color;

opacity

Controls transparency of the whole element (0 = invisible, 1 = fully visible). Affects children too.

Difference from rgba

opacity affects the element and its children. rgba() only affects the specific property (background, color) without affecting child elements.

Example

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

.card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.overlay {
  opacity: 0.6;
}

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned