← All elements
<h2 class="gs">Golden Hour</h2>About this animation
Headline text with a bright highlight sweeping across it, using a wide gradient and background-clip: text.
How it works
A linear-gradient with dark gold at the ends and a bright white highlight in the middle is set as the heading background at 250 percent width. background-clip: text shows it only through the letters, and a keyframe moves the background-position so the highlight sweeps across the word, looking like light catching metal.
Ways to customise it
- Change the gold stops to silver or another metal.
- Edit the 3s duration for a faster or slower sweep.
- Switch the font family from Georgia to your own.
Good to know
Keep the base colours dark enough to read on your background. The animation stops under prefers-reduced-motion. The -webkit- clip properties help older Safari.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.