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

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

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

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

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

・・・・・

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

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

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

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

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

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

 

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

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

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

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

①カラーコードを入力

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

 

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

②分岐点

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

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

③グラデーションの方向

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

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

  • horizontal →
  • vertical ↓
  • diagonal ↘︎
  • diagonal ↗️
  • radial ○

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

④コピペする

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

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

 

注意点

transitionが使えない

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

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

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

まとめ

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

  • カラーコードを入力
  • 分岐点
  • グラデーションの方向
  • コピペする

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