グラデーションを使った見出しのサンプル 10 個

グラデーションを使った 10 個の見出しのサンプルです。

HTML は、言及していない限り下記の単純なものです。

<h2>グラデーションの見出しサンプル</h2>

グラデーションの色選びは、サイトカラーに最適な色とグラデーションを生成する「ColorSpace」をご参考ください。

まずは最も単純な背景色がグラデーションの見出し。

CSS はこちら。

h2 {
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

グラデーションの背景色はそのままに、変形した見出し。形を工夫すると、子ども向けサイトからホラー系サイトまで幅広く使えます。border-radius は奥が深い。

CSS 。

h2 {
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  border-radius: 20px 80px 20px 50px/40px 30px 80px 20px;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

グラデーションの背景色に加えて、背景画像も加えた見出し。パララックス効果で、視線を集めやすいのが魅力。

CSS 。

h2 {
  background: linear-gradient(to right top, rgba(156, 39, 176, .8), rgba(194, 31, 160, .8), rgba(222, 38, 143, .8), rgba(242, 58, 126, .8), rgba(255, 83, 111, .8)), url(画像のパス) center/cover no-repeat fixed;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

グラデーションの色相が、永遠に回転し続ける見出し。ただ、filter に未対応の IE では色相が回転せず、ただのグラデーションになります。

また、filter を使ったアニメーションは、ブラウザに負荷をかけるのが欠点です。

CSS 。

h2 {
  animation: headline 8s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

@keyframes headline {
  100% {
    filter: hue-rotate(360deg);
  }
}

色の変化を抑える場合は、hue-rotate の値を小さくします。

CSS 。

h2 {
  animation: headline 3s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

@keyframes headline {
  100% {
    filter: hue-rotate(45deg);
  }
}

これまでのグラデーションの背景、背景画像、色相回転の 3 つを組み合わせた見出し。背景画像と色相回転の組み合わせは、相性が抜群。

CSS 。

h2 {
  animation: headline 8s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  background: linear-gradient(to right top, rgba(156, 39, 176, .8), rgba(194, 31, 160, .8), rgba(222, 38, 143, .8), rgba(242, 58, 126, .8), rgba(255, 83, 111, .8)), url(画像のパス) center /cover no-repeat fixed;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

@keyframes headline {
  100% {
    filter: hue-rotate(360deg);
  }
}

下辺を斜めにした非平行の見出し。ただ、HTML にラッパーが必要です。

HTML 。

<div class="headline-wrap">
  <h2>グラデーションの見出しサンプル</h2>
</div>

CSS 。

.headline-wrap {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.headline-wrap:after {
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  border-radius: 8px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: skewY(-3deg);
  transform-origin: top left;
}

h2 {
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px 51px;
  position: relative;
  z-index: 1;
}

グラデーションにできるのは背景色だけではありません。ボーダーもシンプルでいい感じ。

CSS 。

h2 {
  border-image: linear-gradient(to right, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f) 1/0 0 4px;
  border-style: solid;
  color: #212121;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

border-image の値をちょっとだけ変更すれば、上下のボーダーに。

CSS 。

h2 {
  border-image: linear-gradient(to right, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f) 1/4px 0;
  border-style: solid;
  color: #212121;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

グラデーションはグラデーションでも、色をはっきりと分けたグラデーション指定のボーダー。

CSS 。

h2 {
  border-image: linear-gradient(to right, #ff5252 40px, #12005e 40px) 1/0 0 4px;
  border-style: solid;
  color: #212121;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

ガーリー系サイトに合いそうなストライプ調も可能。

CSS 。

h2 {
  border-image: repeating-linear-gradient(-45deg, #ff5252, #ff5252 2px, transparent 2px, transparent 6px) 16/0 0 6px;
  border-style: solid;
  color: #212121;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

あまり見かけない文字色のグラデーション。目立つことは間違いなし。ただ、IE は非対応。

CSS 。

h2 {
  background: linear-gradient(to right, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

見出しが「画面に入る時」と「画面から出る時」に、グラデーションの背景色が変わるアニメーション。

ただし、紹介している方法だけでは AMP で表現できません。

※見出しが画面内に入ってから 160px スクロールした地点で、背景色が変化します。

HTML 。

<div class="headline-wrap">
  <h2>グラデーションの見出しサンプル</h2>
  <div class="headline-background"></div>
</div>

CSS 。

.headline-wrap {
  position: relative;
  z-index: 0;
}

h2 {
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  padding: 27px 24px;
}

.headline-background {
  background: linear-gradient(to right top, #9c27b0, #c21fa0, #de268f, #f23a7e, #ff536f);
  border-radius: 8px;
  bottom: 0;
  left: 0;
  opacity: .5;
  position: absolute;
  right: 0;
  top: 0;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}

.headline-animation .headline-background {
  opacity: 1;
}

JavaScript 。

(function() {
  const headline = document.querySelectorAll('.headline-wrap');
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('headline-animation');
      } else {
        entry.target.classList.remove('headline-animation');
      }
    });
  }, {
    rootMargin: '-160px 0px'
  });

  Array.prototype.forEach.call(headline, function(animation) {
    observer.observe(animation);
  });
})();