グラデーションを使った見出しのサンプル 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, 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
を使ったアニメーションは、ブラウザに負荷をかけるのが欠点です。
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
の値を小さくします。
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 つを組み合わせた見出し。背景画像と色相回転の組み合わせは、相性が良いです。
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 にラッパーが必要です。
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; }
文字色がグラデーション
あまり見かけない文字色のグラデーション。背景色が暗いサイトに良く合います。
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 スクロールした地点で、背景色が変化します。
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); });