Go to Top

デザイントレンドは透明度の高いグラデー!配色サンプルを活用しよう!


180種類のおしゃれなグラデーションがまとめられたサイト「WebGradients」

美しいグラデーションを活用したWebサイトが流行の兆しを見せています。
重ね合わせて使ったり、大きなビジュアルの上に重ねたり、活用方法はいろいろです。

今回は、そんなグラデーションが一覧で表示され、PNGファイルやCSSコードで簡単に取得できる「WebGradients」というサイトをご紹介します。

 

WebGradients

まず「WebGradients」にアクセスをすると、おしゃれな円形グラデーションがデモ表示されています。
気に入ったグラデーションがあったら、右上にある「↓」ボタンでpng形式のデータ右下「_Copy CSS」でCSSコードのコピペが可能。
さらにグラデーションカラーをクリックすると、ウィンドウ全体にカラーを適用し確認することもできます。

003

このサイトでは、Photoshop と Sketch 用ファイルとして、すべてのグラデーションをまとめてダウンロードすることも可能。
また、左上にそれぞれ素敵な名前がついているのでイメージもしやすいです。

とても使いやすいサイトですので、活用してみてはいかがでしょうか。

 

WebGradients
https://webgradients.com/