設計
漸層頭尾的硬邊靠緩動色標消掉，文字底的漸層用 13 個色標
標準 linear-gradient 的頭尾會有硬邊，改用緩動曲線排出多個色標，漸層就能融進畫面；文字底的漸層（scrim）用 13 個色標。
怎麼做
- 標準 linear-gradient 很容易，但用非線性（緩動）的方式做，視覺上可以平滑很多。
- 作者的三種例子：好的是融進畫面的平滑漸層，壞的是沒有文字保護，醜的是標準線性漸層邊緣銳利。
- 作者對普通線性漸層不滿，因為看起來像沒有保護文字的那一種。
- 靈感一：字型設計師長年追求平滑的曲線，讓字形看起來是一個整體。
- 靈感二：Apple 在 iOS7 把圖示遮罩改成從直線到圓角的更平滑過渡。
可以怎麼用
圖卡底部放文字的區塊，用 13 色標漸層墊底，並與顆粒濾鏡搭配。
可直接複製的素材
/* Sharp edges :( */
.image__text {
background-image: linear-gradient(
hsla(0, 0%, 0%, 0.6),
transparent;
);
}
可直接複製的素材
linear-gradient( hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100% );
可直接複製的素材
linear-gradient( hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.917) 5.3%, hsla(0, 0%, 0%, 0.834) 10.6%, hsla(0, 0%, 0%, 0.753) 15.9%, hsla(0, 0%, 0%, 0.672) 21.3%, hsla(0, 0%, 0%, 0.591) 26.8%, hsla(0, 0%, 0%, 0.511) 32.5%, hsla(0, 0%, 0%, 0.433) 38.4%, hsla(0, 0%, 0%, 0.357) 44.5%, hsla(0, 0%, 0%, 0.283) 50.9%, hsla(0, 0%, 0%, 0.213) 57.7%, hsla(0, 0%, 0%, 0.147) 65%, hsla(0, 0%, 0%, 0.089) 72.9%, hsla(0, 0%, 0%, 0.042) 81.4%, hsla(0, 0%, 0%, 0.011) 90.6%, hsla(0, 0%, 0%, 0) 100% );
注意：原文所有範例是黑色到透明的文字底，彩色兩端的做法原文未示範。
來源：Andreas Larsen，2017-05-08｜看原文