最近のUIデザインで見かける、美しいCSSグラデーションのコードのまとめ -Design Gradients
Post on:2022年4月13日
プロのデザイナーによってキュレーションされた、美しいCSSグラデーションのコードを紹介します。さまざまなUIコンテンツやデジタルアートの背景にぴったりな線形グラデーションです。

Design Gradientsはオランダのデザイナーとウルグアイのデベロッパーによる、美しいCSSグラデーションのコレクションで、48種類の線形グラデーションがコピペで簡単に利用できます。

グラデーションをクリックすると、CSSがコピペできます。
48種類の中からいくつかお気に入りのCSSグラデーションをピックアップしてみました。下記は画像ではなく、すべてCSSで実装されたグラデーションです。
1 |
background: linear-gradient(220.55deg, #A531DC 0%, #4300B1 100%); |
1 |
background: linear-gradient(220.55deg, #DD7BFF 0%, #FF6C6C 100%); |
1 |
background: linear-gradient(220.55deg, #FFED46 0%, #FF7EC7 100%); |
1 |
background: linear-gradient(220.55deg, #FFEAF6 0%, #FF9DE4 100%); |
1 |
background: linear-gradient(220.55deg, #FF3F3F 0%, #063CFF 100%); |
1 |
background: linear-gradient(220.55deg, #FFDC99 0%, #FF62C0 100%); |
1 |
background: linear-gradient(220.55deg, #FFF500 0%, #FF00B8 100%); |
1 |
background: linear-gradient(220.55deg, #FFE70B 0%, #27B643 100%); |
1 |
background: linear-gradient(220.55deg, #B7DCFF 0%, #FFA4F6 100%); |
1 |
background: linear-gradient(220.55deg, #00E0EE 0%, #AD00FE 100%); |
sponsors