MoreLesson 215Free preview

Gradient Bg Scroll

This lesson is part of How To · All levels

Summary

A gradient background scroll is a gradient background that appears silent as the content above it is scrolling. These effects are usually created by background-attachments: fixed on the gradient element, so that the gradient is bound to the viewport. The result gives a deep impression and is often used on the hero section or landing page.

Key points

Background-attachment: fixed making the background silent relative to the viewport
Linear-gradients can be background without requiring an image file
Make sure the text above the gradient still has enough contrast
Performance testing on mobile devices because of the fixed background can be heavier.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.