メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web デザイナー

はじめに

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

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

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

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

単純に背景色がグラデーション

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

グラデーションの見出しサンプル 01

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 は奥が深い。

グラデーションの見出しサンプル 02

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;
}

パララックスな背景画像

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

グラデーションの見出しサンプル 03

CSS 。

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

色相の変化

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

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

GPU アクセラレーションが可能なプロパティの transform や opacity を使わない場合、ブラウザに負荷をかけます。例えば、background-position を使いグラデーションにアニメーションをつける方法もありますが、ブラウザに負荷がかかります。

グラデーションの見出しサンプル 04

CSS 。

h2 {
  animation: headline 8s cubic-bezier(0.4, 0, 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 の値を小さくします。

グラデーションの見出しサンプル 04

CSS 。

h2 {
  animation: headline 3s cubic-bezier(0.4, 0, 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 つを組み合わせた見出し。背景画像と色相回転の組み合わせは、相性が良いです。

グラデーションの見出しサンプル 05

CSS 。

h2 {
  animation: headline 8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  background:
    linear-gradient(
      to right top,
      rgba(156, 39, 176, 0.8),
      rgba(194, 31, 160, 0.8),
      rgba(222, 38, 143, 0.8),
      rgba(242, 58, 126, 0.8),
      rgba(255, 83, 111, 0.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 にラッパーが必要です。

グラデーションの見出しサンプル 06

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;
}

ボーダーがグラデーション

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

グラデーションの見出しサンプル 07

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 の値をちょっとだけ変更すれば、上下のボーダーに。

グラデーションの見出しサンプル 07

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;
}

参考：border-image でグラデーションのボーダー

はっきりグラデーションのボーダー

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

グラデーションの見出しサンプル 08

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;
}

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

グラデーションの見出しサンプル 08

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;
}

文字色がグラデーション

あまり見かけない文字色のグラデーション。背景色が暗いサイトに良く合います。

文字色がグラデーションの見出しサンプル 09

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;
}

スクロールで背景色が変化

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

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

グラデーションの見出しサンプル 10

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: 0.5;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

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

JavaScript 。

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

headlines.forEach((headline) => {
  observer.observe(headline);
});

参考：Intersection observer によるスクロールアニメーション

フォローする