2019/10/27CSSでグラデーションのコードを書く際に、方向やカラー(rgba・hsla)の数値など面倒と感じることも多いと思います。シンプルなグラデーションであればPhotoShopで作成しCSSに反映することも簡単ですが、多色(3色以上)や割合の異なる複雑なグラデーションとなるとCSSに記述するのも難しくなります。そこで調べてみるとジェネレーターや、グラデーションパターンをコレクションしてるWebサービスなど、CSSをコピペするだけで使える便利なサイトがいろいろ見つかりました。今回は基本的なグラデーションの作り方と、グラデーションの作成に役立つWebサービスを厳選して紹介します。グラデーションの向きはデフォルト(指定なし)で上(開始色)から下(終了色)となっています。top(下から上)といった具合に方向を指定します。orange);}2円形グラデーション円形(放射状)グラデーションを掛けたい要素の背景(background)にradial-gradientを記述し開始色・終了色を指定します。開始位置やグラデーションの変化割合など、詳細な記述方法もありますが、基本的に開始色・終了色を指定するだけで円形グラデーションを表現することができます。orange);}ここまでは基本的なグラデーションの作り方でしたが、もうちょっと凝ったグラデーションを作りたい場合は、グラデーションジェネレーターなどWebサービスを利用した方が効率がよいと思います。次にCSSグラデーション作成時に役に立つジェネレーター・Webサービスを紹介します。GeneratorIllustratorのグラデーションパレットと同様にポイントを追加・削除(カラーをドラッグアウト)や割合(比率)の調整も可能。カラーフォーマットの指定もできる多機能なジェネレーター。Generatorと同じスタイル。インターフェイスが大きく直感的にグラデーションを作成できる。3GradPadカラーの追加・削除、向きなど全てドラッグで操作できる。Gradient」をクリックするとコードが表示されます。4shadeベースカラーを決めてから、色合い・彩度・明度などをスライダーで調整し好みのパターンを見つけ出すツール。画面右下のコードをコピペします。5Blendグラデーションの始点と終点のカラーを指定するだけのシンプルなグラデーションジェネレーター。ブレンド後向きなどを調整しコードをコピペします。6uiGradientsグラデーションパターンをコレクションしたWebサービス。気に入ったグラデーションのコード出力やイメージ(jpg)でのダウンロードもできます。CardsラデーションをコレクションしたWebサービス。カード下部のスライダーでカラー変更や割合の調整が可能。XDとSketchのファイルをダウンロードすることができます。GradientsグラデーションをコレクションしたWebサービス。カスタマイズはできませんが、大量のグラデーションからコードのコピーとイメージ(PNG)のダウンロードができます。9GrabientグラデーションをコレクションしたWebサービス。カラーの追加・削除、向きなどカスタマイズも可能です。AnimatorCSSグラデーションのアニメーションを簡単に作れるジェネレーター。カラー指定、方向やスピードを調整し「Preview」で確認しながらアニメーションのグラデーションを作成します。11Granim.jsCSSではありませんが、グラデーションをアニメーション化できる軽量のJSライブラリも参考までに。