CSSで文字や枠線をグラデーションにしてみよう

CSSのみで「テキストをグラデーションにしたい」ボタンなどの「枠線をグラデーションにしたい」という場面でのやり方を解説していきます。

テキストをグラデーションにする方法

まずは、基本となるHTMLコードを確認していきましょう。

基本となるHTMLコード

シンプルに記事タイトルなどに利用される機会の多い「h1タグ」のテキストをグラデーションにしていきます。

<h1>グラデーション</h1>

次に、CSSを記述していきます。

h1{
 padding: 3rem;
 text-align: center;
 font-size: 30px;
 font-weight: bold;
 display: inline-block;
 background: linear-gradient(90deg, #55c8ac 0%, #d6d75b 100%);
 color: transparent;
 -webkit-background-clip: text;
}

テキストをグラデーションにする仕組みは、テキストを囲んでいる<h1>タグの背景をグラデーションしてテキスト部分をマスクにすることで背景のグラデーションを見えるようにしています。

display: inline-block;

ちなみに<h1>タグや<div>タグなの「ブロックレベルの要素」に直接グラデーションを指定してしまうと、テキストの長さと要素の長さにズレが生じた時にうまくグラデーションがかからない場合があります。なので、テキストを囲っている要素は「インライン要素に変更」するために display: inline; や display: inline-block; を指定するか span要素 を使うようにしましょう。

サンプルは<h1>タグに対して display: inline-block; を指定しています。

background: linear-gradient;

テキストに適用したいグラデーションを<h1>タグの背景色に指定します。

-webkit-background-clip: text;

テキストを囲っている要素をテキストの形にクリッピングします。

color: transparent;

テキストの色を透明にして背景のグラデーションが見えるようにします。

実際にどのように表示されるかは下の「デモサンプル1」を確認してみてください。

次に、枠線をグラデーションにする方法を見ていきましょう。

枠線をグラデーションにする方法

まずは、基本となるHTMLコードを確認していきましょう。

基本となるHTMLコード

「div.btnタグ」で囲ったテキストに対してをグラデーションにしていきますが、divタグの内側にspanタグを配置しておきます。

<div class="btn"><a href="#"><span>グラデーション</span></a></div>

次に、CSSを記述していきます。

.btn{
	font-size: 24px;
	font-weight: bold;
	padding: 3rem;
}
.btn a{
	background: linear-gradient(90deg, #55c8ac 0%, #d6d75b 100%);
    display: inline-block;
    padding: 0.25rem 0.25rem;
    border-radius: 2rem;
    text-decoration: none;
}
.btn span{
	display: block;
	background: #ffffff;
	padding: 0.75rem 2.5rem;
	border-radius: 2rem;
	color: #55c8ac;
	transition: all 0.1s linear;
}
.btn span:hover{
	background: transparent;
    color: #ffffff;
}

枠線をグラデーションにする仕組みは、aタグに対してグラデーションの背景を指定し、その上にあるspanタグに白の背景を敷くことで周りの数ピクセルが見えて枠がグラデーションになっているように見せています。つまりaタグとspanタグを少しサイズ違いで重ねることで枠をグラデーションにしているように表現しています。

background: linear-gradient;

aタグの背景をグラデーションにしておきます。

padding: 0.25rem 0.25rem;

aタグにpadding（四方）に0.25rem=4pxの余白を置き、aタグとspanタグの距離として枠線の太さを設定します。

border-radius: 2rem;

aタグの要素を角丸にします。

display: block;

インライン要素のspanタグに対して、aタグの大きさに合わせるためにブロック要素に変換します。

background: #ffffff;

span要素の背景に色を指定します。そしてspanタグに対してもborder-radius: 2rem;を指定して角丸にしておきます。

実際にどのように表示されるかは下の「デモサンプル2」を確認してみてください。