【CSS】カラフルでスタイリッシュ！グラデーションの作り方

皆様、こんにちは！

デザインのインパクトになるグラデーション。

今回はグラデーションについて解説しています。

そしてグラデーションを使ったボタンの作り方について解説していきます。

ベーシックなものからホバーの動きがあるのも、文字のグラデーションなどの

実装例も紹介しております。

これを機にグラデーションの作り方をマスターしましょう！

グラデーションの作り方

kanae

グラデーションってどうやって作るの？

まず初めにグラデーションの作り方を解説しますね！

CSSでグラデーションを表現するにはbackgroundプロパティを使います。

グラデーションのタイプは２つあり、直線的に移動するタイプのグラデーションと

円形状に広がるタイプのグラデーションがあります。

直線的なグラデーション

backgroundプロパティにlinear-gradientを指定すると

直線的に移動するグラデーションが作れます。

カッコの中には指定したい色を入れていきます。

background: linear-gradient(#bc87f1,#6e04d9);

上下にグラデーションしているものが作れました！

グラデーションする向きを横方向に変えたい場合は

カッコにto leftもしくはto rightを指定しましょう。

色の指定とはカンマで区切ってくださいね！

background: linear-gradient(to left, #bc87f1,#6e04d9);

円形のグラデーション

backgroundプロパティにradial-gradientを指定すると

円形に広がるグラデーションが作ることができます。

 background: radial-gradient(#aceeff,#0561ea);

円形状のタイプは流れる方向は変更出来ませんが

そのかわりに色の配分を指定することが出来ます。

background: radial-gradient(#aceeff 30%,#0561ea 70%);

この場合、30% までは#aceeff（水色）で指定

30%〜70%の間はグラデーション

70%以降は#0561ea（青色）で指定してあります。

グラデーションボタン

kanae

グラデーションボタン作っていくよ！

グラデーションの作り方がわかったら早速ボタンを作っていきましょう！

角丸なボタン

See the Pen グラデーション by kanae (@suzukana) on CodePen.

基本的な角丸のボタンです。

ホバーすると透過度が変わります。

枠あり影ありボタン

See the Pen 枠ありグラデーション by kanae (@suzukana) on CodePen.

枠ありのボタンで影をつけて少し立体的に見せています。

ホバーすると浮き上がるような動きをします。

ホバーするとグラデーションが流れるボタン

See the Pen 流れるグラデーション by kanae (@suzukana) on CodePen.

こちらのホバーすると流れるグラデーションボタンですが、

今までと少し実装方法が異なります！

background-size: 200% auto;

background-sizeを200%にし２倍の大きさにしています。

.gradient:hover {
  background-position:100% 0;
}

そしてホバーの時にbackground-positionを使って横に100%ずらしています。

transitionプロパティを使いアニメーションさせることで

ホバーした時に流れるようなグラデーションが出来上がります！

文字と枠線がグラデーションのボタン

See the Pen 文字と枠のグラデーションボタン by kanae (@suzukana) on CodePen.

ボタンの文字と枠がグラデーションになっているボタンです。

まず、元の要素になるところにボタンと基礎となるボタンを作ります。

.gradient4 {
  margin-top: 20px;
  margin-left: 20px;
  width: 300px;
  height: 50px;
  background-color: #fff;
  border-radius: 30px;
  position: relative;
  text-align: center;
}

今度は擬似要素を使い、先ほどの白いボタンより枠線の太さ分

大きいグラデーションのボタンを作り重ねます。

.gradient4::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background: linear-gradient(90deg, #e44fa5, rgb(162, 84, 166) 24%, #0860a8);
  border-radius: 33px;
  z-index: -1;
}

最後に文字をグラデーションしていきます。

background-clip: text;で背景をテキストの中に切り取って表示します。

そしてtext-fill-color: transparent;で元々の文字の色を透明にし

背景のグラデーションを見えるようにします。

.gradient4 a {
  display: inline-block;
  height: 70px;
  line-height: 70px;
  text-decoration: none;
  background: linear-gradient(90deg, #e44fa5, rgb(162, 84, 166) 24%, #0860a8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}