Advertisement

webgradients1

 

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。

 

WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。

 

 

 

詳細は以下から。

 

 

 

コピペ自由!美しいグラデーションを180種類揃えた WebGradients

 

WebGradients では、配色の参考にしたい美しいグラデーションカラーが一覧で揃っており、使い方もとてもシンプルです。各パネルでは、2500x2500pxのPNGファイルをダウンロードできたり、使用している色のHEXコードもまとめて確認でき、Webデザイン制作に便利なCSS3コードもボタンひとつでコピペ可能。さらにグラデーションカラーをクリックすることで、ウィンドウ全体にカラーを適用することもできます。

 

 

 

以下は収録されているグラデーションカラー配色のサンプル例です。

 

webgradients2

 

このサイトでは、Photoshop と Sketch 用ファイルとして、すべてのグラデーションをまとめてダウンロードすることもできるので、今後のデザイン制作に活用してみてはいかがでしょう。見た目もシンプルで使いやすいサイトとなっています。

 

uigradient-top
カラーリング、配色の参考にしたい美しいCSSグラデーションカラーをあつめたギャラリーサイトuiGradientsが、個人的にデザイン制作で役に立ったので、備忘録的エ

 

 

グラデーションや配色に使えるツール、素材まとめ

より詳しいグラデーションの使い方や無料素材をまとめて紹介しています。

gradient-trend-1
海外サイト 99designs で公開された The gradient design trend: what it looks like and how to use

 

グラデーションの色合いは異なりますが、鮮やかなネオン系の配色を得意としたツール。

screencapture-grabient-1501027289900-1
2017年のグラフィックやウェッブデザインを見ていると、発色の良い鮮やかなグラデーションカラーの利用されている機会が多く、今年の人気トレンドのひとつと言えます。

 

この他にも、グラデーションカラーに関連するツールなども紹介しています。コピペで利用できるお手軽なツールが揃っています。

css-gradient-ultimate-collection
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無

 

配色えらびに迷ったときに使えるツールを2019年最新版にアップデートしています。

color-tool2015-top
この記事は、2016年8月22日に公開された記事を再編集しています。新しいツールを加え、サービスが終了しているツールは削除し、合計44個の配色ツールサービスを紹介してい

 

手軽に利用できる色合いが美しいグラデーションカラーのテクスチャ素材100枚が揃います。

mesh-gradient
2018年にかけてよく見かけるようになったグラフィックデザインのトレンドに、グラデーションカラーの利用があります。鮮やかでポップな配色から、どこかノスタルジックでモ

 

Holographic Gradients

9

 

 

 

Winter Gradients

冬を連想する幻想的な色使いが魅力的なグラデーションのベクターテクスチャ30枚セット。

10

 

 

 

Gradient Topography Collection

地図などで使われる等高線をモチーフに、美しいグラデーションを組み合わせた60枚の高品質テクスチャ素材セット。

11

 

参照元リンク : Fresh Background Gradients | WeGradients