CSSでグラデーションを使う方法！背景・文字・ボーダー・角丸ボーダーボタン

2023年08月24日

html＆css

本日はCSSで各種グラデーションの設定方法をご説明させていただきます。

かなり前からCSSで文字や背景などにグラデーションを使用できていましたがIE非対応などがあり、画像での対応をしていましたがIE（インターネットエクスプローラー）のサービスが終了して、色々なCSSを気にせずに使用することができるようになり最近はCSSを再度勉強するようになりました。

今ままではIEのせいにして、画像で作っていたのですがIEが終了して言い訳ができなくなってきたので、少し勉強したのでシェアさせていただきます。

CSSでグラデーション気になる
文字もできるの？
記事は若干いい加減でもいい
少しでも為になれば

CSSでグラデーション

最近はCSSで本当なんでもできるようになってきましたね。

今回は下記4項目のご説明をさせていただきます。

背景をグラデーション
文字をグラデーション
ボーダーをグラデーション
グラデーションのボーダー付き角丸ボタン

背景をグラデーション

もともと、マリオ君はグラデーションをあまり使うようなデザインをしませんが、近年インスタグラムの台頭にともない、インスタのイメージに合わせてグラデーションを使う機会がぼちぼちあります。

それでは、CSSで背景にグラデーションをかける方法です。

background: linear-gradient(角度・方向, グラデ始まりの色, グラデ途中の色, グラデ終わりの色));//線形グラデーション
background: radial-gradient( 形サイズ位置など,グラデ始まりの色,グラデ途中の色, グラデ終わりの色));//円系グラデーション

上記プロパティで簡単に背景をグラデーションにできます。途中の色などは省略できます。
他にも種類はありますが、よく使うのは上記２つの線形と円形かと思います。

グラデーションを設定するのはプロパティひとつで簡単にできるのですが、かっこの中の詳細を書くのが大変です。上記の書き方以外にも他の書き方も色々あるし、色の設定なども大変です。

ちなみにインスタっぽい背景の詳細はこんな感じ

.instabg{
background: linear-gradient(225deg,#1400c8,#b900b4,#f50000);
}

線形のグラデーションで角度が225deg（degは角度です。マイナスでも書けます。マイナスなら-135deg）で始まりの色が＃1400C8、途中の色が＃B900B4、終わりの色が＃F50000となっています。

インスタっぽい線形グラデーション背景

円形はこんな感じ

.instabg02{
	background: radial-gradient(#1400c8,#b900b4 50%,#f50000 100%);
}

インスタっぽい円形グラデーション背景

かっこの中身複雑じゃね？？？

って思いますよね。大丈夫です。なんとなく中身がわかれば大丈夫なんです。
あたまの良い方がちゃんとエディターを作ってくれています。

基本的にエディターからコピペして、少しカスタマイズとかができれば問題ないです。

お勧めのグラデーションエディターはこちら

お好きなグラデーションを選んで、色や間隔、形状などを選んでコピペするだけで簡単に設定することができます。

上記で紹介したインスタっぽい背景よりさらに４色使用してより本物に近づけたグラデーションも簡単に作ることができます。

グラデーションはもちろん手書きで書ければいいですが、書けなくてもエディターがありますので安心してどんどん使っていきましょう。

文字をグラデーション

お次は文字をCSSでグラデーションにする方法です。
こちらは直接文字をグラデーションにするのではなく、上記で書いた背景をグラデーションにして、それを文字で切り抜きます。
htmlはこんな感じ

<div class="guratext">グラデーションテキスト</div>

CSSはこんな感じ、グラデーションは先ほど紹介させていただいたサイトでインスタっぽいやつをコピーさせていただきました。

.guratext{

	background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%);
	-webkit-background-clip: text;//テキストで切り抜き
	-webkit-text-fill-color: transparent;//テキスト部分を透明に
	display: inline-block;//背景と文字のサイズを同じに

}

3行目で背景のグラデーションの色を指定して
4行目でテキストの形で切り抜いて
5行目でテキストの透明にして背景が見えるようにしています。

6行目は背景がテキストのサイズぴったりになるようにinline-blockを指定しています。ブロック要素の場合横幅の初期値が100％なので、テキストの範囲から背景がはみ出てしまい、テキストに思い通りの色が付かないためです。

こんな感じになります。

グラデーションテキスト

簡単に文字をグラデージョンにすることができました。

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

次はボーダーをグラデーションにしてみます。

こちらはいままで書いていたbackground-image: linear-gradient
のbackgroudがborderに変わります。
グラデーション自体は同じです。

htmlはこんな感じ

<div class="guraborder">グラデーションボーダー</div>

CSSはこんな感じ

	.guraborder{
		border: 5px solid;
		border-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%) ;
		border-image-slice: 1;//ボーダーの表示方法を線に合わせる		
	}

２行目でボーダーの太さと線の種類を設定して
３行目でグラデーションを書いて
４行目でボーダーの表示方法を線に合わせています。
※４行目いまいちわかっていません。取り合えず必要です。

こんな感じになります。

グラデーションボーダー

注意点としてはCSSの書き方の順番に気おつけてください。
上記サンプルの様に線の太さと線の種類を先に記述してください。

こちらも簡単にグラデーションのボーダーを作ることできました。

グラデーションのボーダー付き角丸ボタン

最後はグラデーションのボーダー付ボタンの作り方です。
文字で書くとわかりづらいですが下記のようなボタンです。

詳細はこちら

えっ！
さっきのボーダーにグラデーションかけたやつ角丸にしただけじゃんって思いますよね。
そうなんですが、少しちがって、border-imageには角丸のborder-radiusは適用されないようです。
background-imageのグラデには角丸のborder-radiusが適用されるので、そちらで作っています。
要素を重ねてつくっています。
htmlはこんな感じ

	<div class="gurabtn02">
		<a href="#">詳細はこちら</a>
	</div>

CSSはこんな感じ

	.gurabtn02 {

		a{

			padding: 25px;
			max-width:200px;
			margin: 30px auto;
			text-align: center;
			display: block;
			position: relative;
			z-index: 2;

			&::before,&::after{

				content: '';
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				border-radius: 50px;
				z-index: -1;

			}
			&::before{
				background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%) ;
				left: 0;
				top: 0;
				
			}
			&::after{
				background: #FFF;
				width: calc(100% - 10px);
				height: calc(100% - 10px);
				left: 5px;
				top: 5px;
			}
		}
		
	}

単純にグラデーション背景の疑似要素beforeの上に白の背景の疑似要素afterを5px小さいサイズで載せているだけです。

こちらで、グラデーションのボーダー付ボタンができました。

しかし、色々調べていると、一番下の背景が画像だったり、グラデーションの場合、ボタンの白の部分が透明でないため背景が見えず汎用性がないという記事を見かけました。

こんな感じ

詳細はこちら

確かに、このシチュエーションだと、白背景ではなく透明の方がいいですね。
その場合はマスクをかければ透明にできるようです。
htmlはこんな感じ（クラスを変えただけです）

	<div class="gurabtn03">
		<a href="#">詳細はこちら</a>
	</div>

CSSはこんな感じ

	.gurabtn03 {
		
		
		background-image: linear-gradient(0deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
		padding: 20px;
		
		
		a{
			
		
			padding: 25px;
			max-width:200px;
			margin: 30px auto;
			text-align: center;
			display: block;
			position: relative;
			z-index: 2;
			&::before{

				content: '';
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				border-radius: 50px;
				z-index: -1;
				left: 0;
				top: 0;
				background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%) ;
				background-origin: border-box;
				background-clip: border-box; 
				border: 5px solid transparent;
				-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
				-webkit-mask-composite: destination-out;
				mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
				mask-composite: exclude;

			}
		}
		
	}

で完成がこちら

詳細はこちら

先ほどまで白だったボタンの背景が透明になり、一番下の背景が見えています。

CSSに書いてある内容は
４行目５行目は背景なので気にしないでください。

29行目から36行目がマスクの部分です。
下記のサイト様を参考に勉強させていただきましたが、全く理解できませんでした↓↓。
勉強させていただいたサイト様はこちら

私がお客様のサイトでこのような事例の場合は画像で対応したいと思います。

以上になります。

いかがでしたでしょうか？グラデーションもエディターを使えば簡単に利用することができました。

ボーダーでは角丸にならないなど少しテクニカルな部分もありましたが、IEを気にせずCSSで書けるのはうれしいですね。

皆様もぜひ活用してみてください。