見出しタグのボーダーにグラデーションを使ったサンプル集
h2やh3などの見出しタグのデザイン等使えるボーダーにグラデーションを使ったCSSサンプル集です。
共通HTML
<h2 class="sample1">sample1</h2>
<h2 class="sample2">sample2</h2>
<h2 class="sample3">sample3</h2>
<h2 class="sample4">sample4</h2>目次
透過色にフェードアウトしていくボーダーグラデーションのサンプル
See the Pen CSS Design check pattern Checker Red by yochans (@yochans) on CodePen.
右端に向かうにつれてボーダーカラーをグラデーションで透過色にしていく見出し向けのCSSサンプルです。
シンプルですが只の横棒が入るだけより、オシャレになります。
フェードアウトしていくタイミング別に４タイプのサンプルを設置しておきます。
.sample1 {
border-bottom: 3px solid;
border-image: linear-gradient(to right, #4169e1 0% 50%, transparent 100%);
border-image-slice: 1;
}.sample2 {
border-bottom: 3px solid;
border-image: linear-gradient(to right, #4169e1 0%, transparent 100%);
border-image-slice: 1;
}.sample3 {
border-bottom: 3px solid;
border-image: linear-gradient(to right, #4169e1 0%, transparent 75%);
border-image-slice: 1;
}.sample4 {
border-bottom: 3px solid;
border-image: linear-gradient(to right, #4169e1 0%, transparent 50%);
border-image-slice: 1;
}複数色グラデーションのボーダーデザインサンプル
See the Pen CSS text Underline Gradation（fade out） by yochans (@yochans) on CodePen.
複数色を使ったグラデーションをボーダーカラーに施したCSSサンプルコードです。
こちらも最後の色にtransparent（透過）を割り当てることで右側手前でフェードアウトしていく感じのボーダーにもなります。
.sample1 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0%,
#1E88E5 100%
);
border-image-slice: 1;
}.sample2 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0%,
#1E88E5 50%,
#FFCA28 100%
);
border-image-slice: 1;
}.sample3 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0% 20%,
#1E88E5 25% 45%,
#FFCA28 50% 70%,
#558B2F 75% 100%
);
border-image-slice: 1;
}.sample4 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0% 15%,
#1E88E5 20% 35%,
#FFCA28 40% 55%,
#558B2F 60% 75%,
#E64A19 80% 100%
);
border-image-slice: 1;
}くっきりグラデーションのボーダーデザインサンプル
See the Pen CSS text Underline Gradation（fade out colors） by yochans (@yochans) on CodePen.
徐々に変化するのではなく、くっきりとしたグラデーションを指定しています。
linear-gradientでくっきり色分けする方法は、色の終点値と次の色の始点値を同じにする事で可能です。
.sample1 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0% 50%,
#1E88E5 50% 100%
);
border-image-slice: 1;
}.sample2 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0% 33%,
#1E88E5 33% 66%,
#FFCA28 66% 100%
);
border-image-slice: 1;
}.sample3 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0% 25%,
#1E88E5 25% 50%,
#FFCA28 50% 75%,
#558B2F 75% 100%
);
border-image-slice: 1;
}.sample4 {
border-bottom: 3px solid;
border-image: linear-gradient(to right,
#FF5252 0% 20%,
#1E88E5 20% 40%,
#FFCA28 40% 60%,
#558B2F 60% 80%,
#E64A19 80% 100%
);
border-image-slice: 1;
}破線（dashed）グラデーションのボーダーデザインサンプル
See the Pen CSS text Underline Gradation（dashed） by yochans (@yochans) on CodePen.
borderにグラデーションを当てると破線（dashed）や点線（dotted）のborder指定は反映されなくなるので、交互に透明色（transparent ）と色を切り替える事で破線を表現しています。
.sample1 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 30px,
transparent 30px 35px
);
border-image-slice: 1;
}.sample2 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 30px,
transparent 30px 35px,
#1E88E5 35px 65px,
transparent 65px 70px
);
border-image-slice: 1;
}.sample3 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 30px,
transparent 30px 35px,
#1E88E5 35px 65px,
transparent 65px 70px,
#FFCA28 70px 100px,
transparent 100px 105px
);
border-image-slice: 1;
}.sample4 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 80px,
transparent 80px 85px,
#1E88E5 85px 165px,
transparent 165px 170px
);
border-image-slice: 1;
}点線（dotted）グラデーションのボーダーデザインサンプル
See the Pen CSS text Underline Gradation（dotted） by yochans (@yochans) on CodePen.
破線（dashed）と同じく点線（dotted）のボーダーCSSサンプルも設置しておきます。
サンプル4は破線と点線の混合タイプです。
.sample1 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 3px,
transparent 3px 10px
);
border-image-slice: 1;
}.sample2 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 3px,
transparent 3px 10px,
#1E88E5 10px 13px,
transparent 13px 20px
);
border-image-slice: 1;
}.sample3 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 3px,
transparent 3px 10px,
#1E88E5 10px 13px,
transparent 13px 20px,
#FFCA28 20px 23px,
transparent 23px 30px
);
border-image-slice: 1;
}.sample4 {
border-bottom: 3px solid;
border-image: repeating-linear-gradient(to right,
#FF5252 0 10px,
transparent 10px 17px,
#1E88E5 17px 20px,
transparent 20px 27px
);
border-image-slice: 1;
}グラデーションのボーダーとシルエット画像をデザインサンプル
See the Pen CSS text Underline Gradation（silhouette） by yochans (@yochans) on CodePen.
グラデーションさせたボーダーと商用OKのキャラクターのシルエットを合わせた見出しタグ向けCSSデザインです。
配布元は以下にリンクしておきます。
シルエットの位置はbackground-position、大きさはpaddingの1つ目の値で調節できます。
.sample1 {
position:relative;
padding: 70px 0 10px 0;
padding-left:1.2em;
border-bottom: 4px solid;
border-image: linear-gradient(to right, #000 0% 50%, transparent 100%);
border-image-slice: 1;
background-image:url("https://1-notes.com/wp-content/uploads/2020/01/cat.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 0px 20px;
}.sample2 {
position:relative;
padding: 70px 0 10px 0;
padding-left:1.2em;
border-bottom: 4px solid;
border-image: linear-gradient(to right, #424242 0% 50%, transparent 100%);
border-image-slice: 1;
background-image:url("https://1-notes.com/wp-content/uploads/2020/01/dog.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 16px 18px;
}.sample3 {
position:relative;
padding: 70px 0 10px 0;
padding-left:1.2em;
border-bottom: 4px solid;
border-image: linear-gradient(to right, #00008b 0% 50%, transparent 100%);
border-image-slice: 1;
background-image:url("https://1-notes.com/wp-content/uploads/2020/01/men.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 0px 4px;
}チェック柄のボーダーを使った見出しデザインサンプル
See the Pen CSS text Underline Gradation（fade out） by yochans (@yochans) on CodePen.
もはやグラデーションとはちょっと違ってきますが、linear-gradientを使って作ったチェック柄をボーダーにした見出しタグ用の下線CSSデザインです。
チェック柄については以下にまとめてありますので、宜しければどうぞです。
https://1-notes.com/css-text-check-pattern/ボーダーの位置はbottom、太さはheightで変更・調節です。
.sample1{
position: relative;
}
.sample1:before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width:100%;
height:12px;
background: repeating-linear-gradient( 0deg,
rgba( 0, 0, 0, 0.4) 0px 4px, /*黒*/
rgba( 255, 255, 255, 0.4) 4px 8px, /*白*/
rgba( 0, 0, 0, 0.4) 8px 12px, /*黒*/
rgba( 255, 255, 255, 0.4) 12px 16px, /*白*/
rgba( 0, 0, 0, 0.4) 16px 20px, /*黒*/
rgba( 209, 172, 118, 0.4) 20px 30px, /*香*/
rgba( 213, 0, 0, 0.4) 30px 32px,/*赤*/
rgba( 209, 172, 118, 0.4) 32px 36px, /*香*/
rgba( 213, 0, 0, 0.4) 36px 38px,/*赤*/
rgba( 209, 172, 118, 0.4) 38px 48px /*香*/
),
repeating-linear-gradient( 90deg,
rgba( 0, 0, 0, 1) 0px 3px, /*黒*/
rgba( 255, 255, 255, 1) 3px 6px, /*白*/
rgba( 0, 0, 0, 1) 6px 9px, /*黒*/
rgba( 255, 255, 255, 1) 9px 12px, /*白*/
rgba( 0, 0, 0, 1) 12px 15px, /*黒*/
rgba( 209, 172, 118, 1) 15px 30px, /*香*/
rgba( 213, 0, 0, 0.8) 30px 31px,/*赤*/
rgba( 209, 172, 118, 1) 31px 33px, /*香*/
rgba( 213, 0, 0, 0.8) 33px 34px,/*赤*/
rgba( 209, 172, 118, 1) 34px 49px /*香*/
);
}.sample2{
position: relative;
}
.sample2:before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width:100%;
height:12px;
background: repeating-linear-gradient( 0deg, rgba(198, 40, 40, .5) 0px 8px, transparent 8px 16px),
repeating-linear-gradient( 90deg, rgba(198, 40, 40, .5) 0px 8px, transparent 8px 16px);
}.sample3{
position: relative;
}
.sample3:before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width:100%;
height:12px;
background: linear-gradient(45deg, #0277BD 25%, transparent 25%, transparent 75%, #0277BD 75%),
linear-gradient(45deg, #0277BD 25%, transparent 25%, transparent 75%, #0277BD 75%);
background-color: #03A9F4;
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
}.sample4{
position: relative;
}
.sample4:before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width:100%;
height:12px;
background: linear-gradient(45deg, #212121 25%, transparent 25%, transparent 75%, #212121 75%),
linear-gradient(45deg, #212121 25%, transparent 25%, transparent 75%, #212121 75%);
background-color: #BDBDBD;
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
}