【ツール紹介】CSSグラデーションの作り方

記事内に商品プロモーションを含む場合があります

「簡単にグラデーションを作る方法ないのかな？」

こういった疑問にお答えします。

CSS3になり、グラデーションを表現できるようになったとはいえ、初心者の方からすれば以下のようなCSSを見てもさっぱり分からない方も多いと思います。

background: linear-gradient(to bottom,#FFF,#FFC778 30%,#F89174);

・・・・・

パッと見、これがどのような表現なのかは理解できませんよね。

解説しているサイトもありますが、簡単に実装できるようなツールはないのかと探してみると・・・「グラデーションジェネレーター」というものがありました。

カラーコードを入れるだけで、グラデーションができてしまうというものです。

今回はこのグラデーションジェネレーターについて解説していきます。

Contents

グラデーションジェネレーターの使い方

グラデーションツールにはいくつか種類があるのですが、ここで紹介するのは、Ultimate CSS Gradient Generatorです。

どれも簡単に使えますが、個人的に使い慣れているので、こちらにしました。

例えば、以下のようなボタンを作りたいとしましょう。

See the Pen
vYGgVjq by YU OHSHIRO (@you405)
on CodePen.

ボタンの色に青いグラデーションが使用されています。

まず、色を決めるために四角の枠内をクリックします（「枠内」がポイント）

カラーコードを入力します。

次に分岐点を入力します。

「どのポイントでグラデーションさせるか」です。
ここでは、少し見づらいですが「67%」地点としています。

次に始点と終点の方向を選択します。

方向は全部で5つあります。

それぞれ記号が書いてあるので、パッと見で分かります。

最後に生成されたコードをコピーして、適用させたいところにペーストさせて完成です。

See the Pen
vYGgVjq by YU OHSHIRO (@you405)
on CodePen.

ただし、注意点もあります。

アニメーションが使えないということです。

グラデーションを表現するにはbackgroundを使用しますが、そうするとtransitionが使えなくなります。
（background-colorではtransitionが使えます）

今回はCSSグラデーションの便利ツール、グラデーションジェネレーターの使い方について解説しました。

使い慣れるととても便利なものですので、ぜひ使いこなしてみてください。