Gradient Overlays

Layer a semi-transparent gradient over images to ensure text contrast and add visual depth.

Example

.hero {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7)),
              url("hero.jpg") center/cover no-repeat;
  color: white;
}
.card-img { position: relative; }
.card-img::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(0,0,0,0.6)); }

CSS

Full Editor

Pro Tip

Stack gradients and images with a comma in the background shorthand.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned