Edge fade
Also called: fade mask, gradient mask, fade-out edges, soft edges.
A row, list or picture that fades to transparent at its edges, so it melts into the background instead of being cut off with a hard line. It is made with a gradient mask.
The row and the list melt into the background at their edges, instead of being cut off with a hard line.
On
Say it in a prompt
Fade out the edges of the logo row and the activity list: on the row use mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), and on the list fade the bottom from 45% down to transparent. Seen on
- Linear: Many areas fade out to transparent at their edges (lots of mask-image: linear-gradient), so pictures melt into the dark background.
You might describe it as
- list that fades away at the bottom
- row that disappears softly at both sides
- content melting into the background
Not to be confused with
- Gradient
An edge fade makes the content itself turn see-through at its edges; a gradient is a fill of colors blending into each other.