直感的にグラデーションを作れるジェネレーター「CSS Gradient」

直感的にグラデーションを作れるジェネレーター「CSS Gradient」

Web制作の現場ではよく使われるグラデーションですが、複数色が重なったグラデーションをcssで記述するのは結構面倒な作業です。

今回は、コーディングの際などに、さくっとグラデーションのcssが生成できる便利なジェネレーター「CSS Gradient」の使い方を解説します。

「CSS Gradient」の使い方

CSS Gradient」にアクセスします。

CSS Gradient:https://cssgradient.io/

ますは、横長の部分から説明します。

横長のバーの上に3つのカーソルのようなものがありますが、一番左から0%(スタート)、中央の50%、右の100%となっていて、それぞれクリックすると、下の色編集(左側)のエリアで、色や透明度を変更できます。

バー上のカーソルは横に動かせるので、色の位置も変えられます。
ちなみに、下の色編集の右側HEXエリアも連動しているので、ここからも色や、色の位置を変更できます。

そして、バーのカーソル(色)を追加したい場合は、何もない部分をクリックすると追加されます。
逆に減らしたい場合は、HEXエリアで減らしたい色の「×」をクリックすることで削除できます。

グラデーションの形状を変更する場合は、一番下の左側のボタンで切り替えます。
線形円形のグラデーションが選べます。(デフォルトは線形)

グラデーションの角度を変更する場合は、その隣のアイコンの小さい丸を動かすと角度が変わります。

③ 「Upload Image」をクリックして画像を選択すると、その画像からグラデーションを抽出してくれます。

④ 一番右はプリセットカラーになっているのでここからグラデーションを選択することもできます。

グラデーション作成までの説明はここまでです。
今回はこんなかんじのグラデーションにしました。

ご希望のグラデーション作れたら、画面を少し下へスクロールすると、既にcssコードが生成されています。
(右上の「Max Compatibility」にチェックを入れるとベンダープレフィックス付きの記述になります)

Copy to Clipboard」をクリックするとコードがコピーされます。

こちらのコードを作業中のcssファイルに追加すればOKです!

まとめ

今回は、直感的にグラデーションを作れるジェネレーター「CSS Gradient」の使い方を解説しました。

ジェネレーターを使えば複雑なグラデーションのCSSも短時間で作成できて便利ですね。
まだ使ったことのない方は、ぜひ使ってみてください。

WEB DESIGNカテゴリの最新記事