← All elements
<div class="sr"><b>Fresh drops</b><span>New this week</span></div>About this animation
A banner with a curved gradient ribbon made from a stretched radial mask that slowly drifts.
How it works
A very wide ellipse peeks out from the bottom of a dark banner to make a curved edge. Its background is a repeating gradient that slides sideways on a loop, so colour appears to flow along the curve.
Ways to customise it
- Change the gradient colours.
- Edit the text.
- Raise the height for a deeper curve.
Good to know
Text is above the curve in the DOM order, so it stays readable. The flow stops under reduced motion.
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.