ウェブグラディエントが戻ってきているオンラインの世界のためのデザイン要素として戻ってきています。 それらは生命にあなたのウェブサイトを持って来る簡単な方法になった。

それらがよく適用されれば目にウェブサイトにとどまるようにユーザーを誘う統一された感じを与える。 この感覚は、ページ構造の過酷なエッジと休憩の欠如から生じます。

上記の例でわかるように、グラデーションは背景画像のアクションを落ち着かせ、このUIデザインの背景に適したものにします。その理由を知りたいですか？

秘密は、グラデーションが広がる調和は、ほとんど過酷なエッジが表示されない自然界の現象から派生していることです。 すべてが有機的な形や柔らかい遷移を持っています。また、人間は偉大な色覚を持っており、色を見て楽しんでいます。

また、人間は偉大な色覚を持っています。 黒と白のグラデーションを想像してみてください。 それはケースに依存しますが、ほとんどの場合、それは素晴らしいとカラフルなグラデーションが多くの場合に好まれていることを見ていません。なぜ誰もが夕日を見るのが好きだと思いますか？

なぜあなたは夕日を見て好きだと思いますか？p>

または単に空に頭を置きますか？

webページのバックグラウンドでグラデーションを使用することも、前景に迷惑な矢印を配置することなく、コンテンツを通

フォアグラウンドは、とにかく重要な情報のために使用する必要があり、背景は下位の目的を達成することができます。

ボタンやアイコンのグラデーションのような要素に適用することも、簡単な3D効果につながることができます。

適切な勾配を見つけて、これらすべての利点を適切に適用することは必ずしも容易ではありません。

心配しないでください。 解決策があります。

すでにインスピレーションのためだけに、または直接あなたのウェブサイトに簡単に統合するための準備された勾配の多くを提供する多くのツー今、あなたはちょうどあなたのニーズに最適なツールを見つける必要があります。

始めましょう。

インスピレーションweb gradients…

前述のように、symoddは面白いととにかくキャッチされた単純な背景としてどのように良いweb gradients

背景としてグラデーションをQardsを使用するだけでなく、特にアイコンやボタンにほぼすべての単一の要素に適用されます。

Gogoroは、よりダイナミックになり、ブランドの目的をサポートする形状のグラデーションを使用しています。あなたがこれらのウェブサイトで見ることができるように、それはすべて適切なバランスを見つけ、適度に色を使用するこh3>

このグラデーションはとても醜いので、目がとても痛いので、ここでそれを提示することを謝罪しなければなりません。 それはすべて非常に異なっているあまりにも多くの色を持っています。 また、前景の無地の黒のテキストは変位して見え、グラデーションによって抑制されます。

だから、これらの例を見た後、あなたはまだあなたのプロジェクトをサポートすることができるグラデーションを適用することができるかどうか十分ではありませんか？

グラデーションタイプのより良い理解を得るために、このガイドに従ってください。

…そして、それらを見つける場所

uiGradientsは、メイン画面が二つしかないため、非常に使いやすいです。 ロードした後、あなたは直接画面全体にランダムな勾配を見ることができます。

両側の矢印を使用すると、グラデーションのすべての種類の大きなオファー内で切り替えることができます。 第二の画面では、スクロールして色でソートするリストとしてすべてのグラデーションが表示されます。

ウェブグラディエントが作成する雰囲気は、その個々の名前によってサポートされています。 特別な機能として、グラデーションを回転させて、別の視点からどのように見えるかを確認することもできます。

作成したグラデーションをコミュニティに貢献したい人のために、GitHub経由でコレクションにグラデーションを追加するオプションがあります。 これにより、グラデーションの多様性はほぼ無制限になります。uiGradientsは、選択したグラデーションを保存する3つの方法を提供します。 グラフィックデザインソフトウェアまたはコードでグラデーションを再作成する場合は、16進数のカラーコードをコピーするだけです。あなたのウェブサイトへの直接実装のために、あなたはCSSコードを得ることができます。

グラデーションをインスピレーションとして保存するには、JPEGファイルをダウンロードするだけです。

WebGradients

このツールは、スクロールできる長いリストとして180個のwebグラデーションのコレクションを表示することから始 あなたは一つのグラデーションの多くを見たいと思ったら、ちょうどあなたの選択をクリックして、色がすべての画面上に表示されます。

各グラデーションには名前があるので、後でより具体的に適用することができます。WebGradientsはitmeo、オンラインで複数のデジタルツールを提供する会社によって実行されます。

WebGradientsはitmeo、オンラインで複数のデジタルツールを提供する会社によ あなたはスケッチやPhotoshopファイルをダウンロードしたくない場合を除き、彼らのグラデーションサービスは、この場合には、無料です。uiGradientsのように、ここで新しい見つかったグラデーションのインスピレーションを保存する三つの可能性があります。

すべてのグラデーションについて、大きなPNGファイルを保存して、独自のグラフィックデザインの背景として使用することができます。

グラフィックデザインソフトウェアまたはコードで正確な色と勾配を使用するには、Hexカラーコードをコピーするか、勾配のCSSバージョンを取得できます。

coolHue

このグラデーションのコレクションは、最初にwebサイトを開いたときにすでに表示されています。 あなたは60のカラフルなグラデーション内で選択することができます。 ただ、グラデーションのこの様々な行にそれぞれのケースで六つのタイルをスクロールします。残念ながら、グラデーションのフルサイズを表示する方法はありません。

coolHueのための素敵な追加は、あなたがあなたにそれの具体的な印象を与えるグラデーションタイルの上にマウスを置くときのアニメーションです。

ウェブグラディエントは、色だけであなたに彼らの雰囲気を提供しなければなりません。 そのため、このツールには名前がありません。 したがって、右下隅には、SketchとPhotoshopのためのより多くのオプションがあります。

選択したグラデーションの上にマウスを置くと、さらに二つのオプションが表示されます。 簡単に実装できるようにCSSコードをコードにコピーするか、小さなPNGファイルをダウンロードできます。正確な色を使用したい場合は、グラデーションの下から16進数のカラーコードをコピーするだけです。

ColorSpace

ColorSpaceはあなたに10の異なる方向にグラデーションカラーを選択して適用するオプションを提供しています。 色を適用するには、画像編集ソフトウェアで見つけるのと同じように、ポップアップするカラーメニューから選択することができます。 また、色の16進カラーコードを貼り付けることで、使用したい正確な色を取得することもできます。グラデーションは、画面全体の背景に適用されます。

グラデーションは、画面全体の背景に適用されます。

グラデーション これは色の気分の非常によい感じを与え、あなたが最もあなたが捜すかもしれない関連した主題に適するかもしれない感じる色を選ぶように動ColorSpaceを使用すると、選択した色のグラデーションのURLをコピーすることもできます。 これにより、ファイルを保存して添付ファイルとして送信したり、色が何であるかの仕様を送信したりすることなく、色のオプションを共有するこ 彼らはちょうどあなたが送信したリンクをクリックすることで、あなたが見ていたものを見ることができ、彼らは彼らが必要とするすべての情報、ただし、画像ファイルを保存したい場合は、残念ながらこのウェブサイトではそのオプションは提供されません。

ただし、画像ファイルを保存

Ultimate CSS Gradient Generator

今、私たちは、この場合、名前がすでに言うように、あなたのCSSコードへの統合のためにのみ使用され

インターフェイスは四つの部分に分割され、典型的なグラフィックデザインソフトウェアを連想させます。 あなたは、調整またはプリセットを作成し、小さなプレビューでこの結果を表示し、完全なCSSコードを見ていることができます。究極のCSSグラデーションジェネレータは、ブラウザの拡張機能ColorZillaの一部です。 その勾配用具は網の勾配を作成するために無制限の可能性を提供する。

好きなだけ色を追加したり、グラフィックデザインソフトウェアから知っているように色相と彩度を調整したり、グラデーションを逆にしたり、色、不透明度、グラデーションの位置を設定したりすることができます。

それとは別に、独自に作成したグラデーションをプリセットに保存することができますが、CSSまたはSASSコードでエクスポートする方法は一つだけです。

しかし、これに先立って、グラデーションのサイズを設定し、それの向きを異なる方向に変更し、与えられた五つのオプションの中から色の形式を選

決定するための問題？

	uiGradients	WebGradients	coolHue	Gradientify	Gradients.io	CSS Gradient Generator
Full-screen view	+	+	–	+	–	–
Switch in full-screen view	+	–	–	–	–	–
List view	+	+	+	+	+	+
Amount of gradients	almost unlimited	180	60	45	24	unlimited
Sort gradients	by colour	–	–	–	–	–
Named gradients	+	+	–	+	+	–
Rotate gradient (change orientation)	+	–	–	–	–	+
Change colour opacity	–	–	–	–	–	+
Change colour location	–	–	–	–	–	+
More than two colours	+	–	–	–	–	+
Change hue/saturation	–	–	–	–	–	+
Reverse colours	+	–	–	–	–	+
Adding new gradient	+	–	–	–	–	+
Import image	–	–	–	–	–	+
Import CSS code	+	–	–	–	–	+
Change export size	–	–	–	–	–	+
Hex Color Code	+	+	+	+	+	–
CSS code	+	+	+	+	–	+
Chose colour format (CSS)	–	–	–	–	–	+
JPEG file	1920 × 1080	–	–	–	–	–
PNG file	–	2400 × 2000	500 × 500	–	–	–

どのようなwebグラデーションツールは、常にあなたのプロジェクト、あなたが持っている時間と個性や他の品質要件のレベ上記の表は、あなたが望む結果に最適なツールを決定するのに役立ちます。

最も重要なことを覚えていますか？

あまりにも多くの色を使用しないでください–今日のベストプラクティスは、あまりにも違いがない二つの色を使用することです。また、注意を払う必要があるのは、グラデーションの一般的な設計、後でプロジェクトに適用する方法、およびその環境にどのように適合するかです。あなたがテーブルの上に見ることができるようにuiGradientsは、すべての重要な視覚的な機能を提供しています。

このツールを使用すると、可能な限り最良の方法でプロジェクトの勾配を想像することができます。

高品質のwebプロジェクトのグラデーションをより深く適応させたい場合は、CSSコードまたはダウンロードした画像をインポートすることで、UigradientsをUltimate CSS Gradient Generatorこれで、あなた自身でそれを行う準備が整いました。

グラデーションを使用することを決定した場合は、twitterでお知らせください。