【CSS】背景をグラデーションにする

【CSS】背景をグラデーションにする

webアプリケーションの画面を作っていると、デザインにCSSを使うことがほとんどかと思います。

その際に、グラデーションを必要とする部分があったのでメモです。

CSSでグラデーションは、背景にlinear-gradientを使用することで表現することができるようです。

https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

縦にしたり横にしたり、斜めにしたりできるようです。

<style>

.bg-grad1 {
  background: linear-gradient(to bottom, blue, white);
}

.bg-grad2 {
  background: linear-gradient(to right, blue, white);
}

.bg-grad3 {
  background: linear-gradient(to bottom right, blue, white);
}

.bg-grad4 {
  background: linear-gradient(30deg, blue, white);
}
</style>

<div class="bg-grad bg-grad1">
  <span>グラデーション</span>
</div>

<div class="bg-grad bg-grad2">
  <span>グラデーション</span>
</div>

<div class="bg-grad bg-grad3">
  <span>グラデーション</span>
</div>

<div class="bg-grad bg-grad4">
  <span>グラデーション</span>
</div>

色が3色以上ある場合は、パーセントで位置の指定ができます。

<style>
.bg-grad5 {
  background: linear-gradient(#0000ff, #aaaaFF 50%,#0000ff)
}

.bg-grad6 {
  background: linear-gradient(#aaaaff, #0000ff 30%, #00aaff 60%, #ccffff)
}
</style>
<div class="bg-grad bg-grad5">
  <span>グラデーション</span>
</div>

<div class="bg-grad bg-grad6">
  <span>グラデーション</span>
</div>

radial-gradientを使うことで、放射状にもできるそうです。

<style>
.bg-grad7 {
  background: radial-gradient(blue, white);
}
</style>

<div class="bg-grad bg-grad7">
  <span>グラデーション</span>
</div>

repeating-linear-gradientとrepeating-radial-gradientはグラデーションの連続だそうです。

<style>
.bg-grad8 {
  background: repeating-linear-gradient(blue, blue 10px, white 20px)
}
.bg-grad9 {
  repeating-radial-gradient(blue, white 20px, blue 40px)
}
</style>
<div class="bg-grad bg-grad8">
  <span>グラデーション</span>
</div>
<div class="bg-grad bg-grad9">
  <span>グラデーション</span>
</div>

他にも指定方法があるようなので、気になるのであれば上のURLで確認すると良いかと思います。

また、古いブラウザの場合も別の記述方法があるため、上のURLで確認することができます。

ちなみに、今回私が作成したのはこのようなものです。

<style>
.bg-grad99 {
  padding: 0.2rem 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 2px;
  background: linear-gradient(to bottom,
                              #996633,
                              #ff8840 5%,
                              #FFEEBB 10%,
                              #ff8840 30%,
                              #ff8840 80%,
                              #996633);
}
</style>

<div class="bg-grad99">
  <span>グラデーション</span>
</div>

立体風のタイトルラベル用のCSSですね。

これ系をいくつか作りましたが、作り始めると意外と楽しかったです。