Advertisement

 

グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。

 

2色の配色によるグラデーションをつかった影、シャドウグラデーション(英: Shadow Gradients)を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。

 

CSS Shadow Gradientsで作成したグラデーションは、CSSコードとしてワンクリックでコピー、利用できます。

 

CSS Shadow Gradients

https://alvarotrigo.com/shadow-gradients/

 

🧑‍💻 使いかた

 

CSSグラデーションシャドウは、疑似要素をつかって表現しており、backgroundプロパティにlinear-gradient関数を使うことで、手軽にスタイリングすることができるようになりました。

 

使いかたはとてもシンプルで、気に入った配色カラーパレットをクリックするだけ。現在80色のカラーリングが揃っています。

 

 

 

🌈 シャドウグラデーションとは何?

 

シャドウグラデーション(英: Shadow Gradient)は、2色以上の色の変化をたのしむ影のことを指します。

 

グラデーションの仕様は、最近のウェブデザインでとても人気のあるトレンドのひとつで、モダンな印象と見た目が特長。ロゴやスマホアプリ、ウェブデザインなど、現在ではあらゆるところで使われています。

 

もともとグラデーションは技術的な制約から主に背景で使用されていました。しかし現在では、conic-gradient関数をつかうなど、ドロップシャドウにもグラデーションを適用できるテクニックがあります。

 

文字テキストにグラデーションを取り入れたあいはら歯科医院

グラデーションの文字テキストをつかった、あいはら歯科医院のサンプル画像

 

 

動きのある流体シェイプとグラデーションメッシュによる色の混ざり具合が美しいX.1

流体シェイプとグラデーションの融合、X.1のサムネイル画像

 

 

画像に合わせて淡いぼかしグラデーションを重ねることで柔らかい印象を与える SHE リクルートページ

SHEリクルートページ

 

 

ゆらゆらと揺れる水面と透明感のあるグラデーションカラーが美しいKOKOZOのランディングページ。

KOKOZOのトップページサンプル

 

 

並べられたカードをスワイプすると次々にグラデーションの色が変化を楽しむことができる Gucci Beauty

Gucci Beuatyの美しいグラデーションカラー

 

 

🎨 グラデーションの種類

もっともよく見かけるグラデーションが、半径や方向、不透明度などを調整した線形グラデーションや放射線状グラデーションで、さまざまな方法で色をブレンドすることができます。

 

また、より自由な色のブレンド具合や歪み、形状を生成したグラデーションメッシュには、モノトーンやデュオトーン、マルチカラー、グラデーションランプなど、以下のように多くの種類が存在します。

 

 

Trendy Gradients in Web Design では、ベクターファイル形式のAiデータまたはPDFファイルでダウンロードできます。

 

 

🧰 便利で役立つCSSグラデーションツール

 

今回紹介したグラデーションツールの他にも、CSSコードをコピー&ペーストするだけで美しいグラデーションを再現できるツールがたくさんあります。

 

グラデーションツールまとめ配色便利ツールまとめからお気に入りをピックアップしています。

 

Gradient Generator

グラデーションの色がくすんでしまう問題を解決した、CSSグラデーション作成オンラインツール。

 

 

Gradient Blob

CSSのみで表現できる美しいBlobデザインを作成、カスタマイズできるオンラインツール。20色以上のスキンカラーも用意されており、作成したCSSコードをコピペでそのまま利用可能。

液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与え

 

 

Blob Animation

スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール。直線的で無機質な印象から、ナチュラルで優しい印象を与えることができます。

 

 

WebGradients

どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペ可能。

webgradients

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる

 

 

Grabient

ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在22種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。

grabient

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

 

 

ColorSpace

ひとつの色を決めるだけで素敵な配色カラーパレットを自動生成してくれるオンラインツール。3色をつかったグラデーションも作成でき、CSSコードもそのままコピペできる便利な機能ばかり。

 

 

GradPad

選択した2色を直感的に混ぜてグラデーションを作成できる配色ツール。ナビメニューより「Get CSS for this Gradient」でCSSソースコードをコピーできます。また、配色のアイデアが欲しいときは「Gradient Gallery」をクリックすれば、美しいグラデーションをまとめて閲覧、編集することもできます。

css-gradient-css-gradient2

 

 

CoolHue

デザイナーの手作業でひとつずつキュレートされた、美しく幻想的なグラデーションカラーのまとめており、CSS3コードの他にPNGファイルも無料ダウンロードできます。

coolhue

 

 

HUE.css

写真を撮影したようなリアルな影、シャドウを表現できるCSSグラデーション49種類が揃います。

hue_css_-_a_huge_pack_of_49_photorealistic_css_gradients

 

 

Conic.css

CSSで表現できる美しいグラデーションのみを厳選したライブラリで、気に入った配色をクリックすればCSSをコピーできます。

 

 

CSS Gradient Animator

美しく色が変化するアニメーション付きCSSグラデーションをその場で作成し、CSSコードをコピーできるオンラインツール。Spaceキーでランダムに色を変更できます。

css_gradient_animator___fuze

 

 

✍️ グラデーションに役立つ記事まとめ

gradient-rule-0-1

 

より美しいグラデーションを表現したいときは、こちらも参考にどうぞ。

 

デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。 この記事
この記事では、Illustratorで美しいグラデーション作成する基本ガイドとして、数回のシリーズに分けて具体的なデザイン方法や便利なテクニックを紹介しています。
この記事では、Illustratorで美しいグラデーション作成する基本ガイドとして、数回のシリーズに分けて具体的なデザイン方法や便利なテクニックを紹介しています。
海外サイト BuninUX で公開された How to Design Sexy Gradients より許可をもらい、翻訳転載しています。

 

 

無料で利用できるグラデーションテクスチャも、ウェブデザインやグラフィックデザインで重宝します。

この記事では、人気のグラフィックのひとつ「グラデーション」をつかった無料テクスチャ、デザイン素材をまとめてご紹介します。 美しい配色の組み合わせを楽し