CSSのグラデーションを文字に使用したデザイン

出典 : Designed by Freepik

画像を使わずにCSSのグラデーションを文字(テキスト)に使用したデザイン例です。 CSSのグラデーションを文字に対してかけるには、background-clipプロパティを使った方法と、title属性を使いcontentプロパティなどの疑似要素を使って表現する方法があります。 今回はその両方とも紹介します。

またテキストを囲んでいる領域にグラデーションを使用し、文字が徐々に消えていくようにするグラデーションの方法もあるので、そのデザインサンプルも紹介しますね。 基本的には全てコピペするだけでブログやサイトに実装できるので、タイトルロゴなどに試してみて下さい!

タイトルロゴ(文字)にグラデーションを使用

background-clipプロパティを使用し、h1タグなど、タイトルロゴのテキストにグラデーションを使用したデザインサンプルです。 CSSのコードはグラデーションの部分を変更しているだけなので、気に入ったのがなければ、backgroundプロパティのgradientの部分を変更すれば自由に文字にグラデーションを掛ける事ができます。

また使用するHTMLコードは下記のものになります。

<h1 class="sample">GRADATION</h1>

青系のグラデーション

青系のグラデーションのサンプル

薄い青から濃い青にうっすら色が変わるグラデーションです。 会社のタイトルロゴに使われていそうな感じのグラデとなってます。

CSSコードを表示

.sample {
  background: #333;
  background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

明るいグラデーション

明るいグラデーションのサンプル

黄色をベースにして、テキストの中央に向かって徐々に色が濃くなるグラデーションです。

CSSコードを表示

.sample {
  background: #333;
  background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

複数の赤のグラデーション

複数の赤のグラデーションのサンプル

色の違う5種類の赤を組み合わせたグラデーション。 これもどこかの会社のテキストロゴに使われていそうな感じ

CSSコードを表示

.sample {
  background: #333;
  background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

斜めのグラデーション

斜めのグラデーションのサンプル

薄い緑から濃い緑に変化する斜めのグラデーションです。 色を変えると綺麗になるのでお試しを!

CSSコードを表示

.sample {
  background: #333;
  background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

円形のグラデーション

円形のグラデーションサンプル

中央から徐々に色が濃くなる円形のグラデーションです。 途中が色がはっきりするのがちょっとオシャレな感じがします。

CSSコードを表示

.sample {
  background: #333;
  background:  -webkit-radial-gradient(center, ellipse cover, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

中央が濃くなるグラデーション

中央が濃くなるグラデーションのサンプル

中央から左右にかけて文字の色が徐々に薄くなるグラデーションです。 結構よく使われているような気がします。

CSSコードを表示

.sample {
  background: #333;
  background:  -webkit-linear-gradient(45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

title属性とmask-imageで作るcssグラデーション

HTMLタグにtitle属性を追加し、contentプロパティやmask-imageプロパティと組み合わせる事で表現できるCSSのグラデーションサンプルです。

この方法のCSSグラデーションは、テキストにベースカラーを指定し、そこにbefore・afterなどの疑似クラスでフィルターのようなモノを重ねてグラデーションマスクをかけています。 なので色を変更したい場合は、colorプロパティのコードを変更して下さい。

HTMLコードは次のようなモノを使っています。

<h1 class="sample" title="GRADATION">GRADATION</h1>

<!-- title属性が追加されています -->

爽やかなグラデーション

爽やかなグラデーションのサンプル

ベースカラーに薄い青を設定し、beforeで濃い青を重ねているタイプのグラデーション。 爽やかなグラデーションをしたい時にぜひ!

CSSコードを表示


.sample{
  position: relative;
  color:#b1d3f2;
}
.sample:before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  color:#197fd7;
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.8) 100%);
}

ゴールド(金色)のグラデーション

ゴールド(金色)のグラデーション

金色風のグラデーションです。 安っぽいですが、光っているような感じにしました。

CSSコードを表示

.sample{
  position: relative;
  color:#C28C04;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
.sample:before,
.sample:after{
content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.sample:before {
  color:#F6DD05;
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 40%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%);
}
.sample:after{
  color:#fff;
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0) 30%, rgba(0,0,0,0.2) 36%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
}

テキストが途中から消えていくグラデーション

テキスト全体の途中から薄い白のグラデーションを被せ、消えていくような表現をしているサンプルです。 このサンプルでは、テキストの領域に対してCSSグラデーションを指定していますが、画像に対しても使用する事ができるのでお試しを!

使用しているHTMLコードは次のようになります。

<div class="sample">
Sample text for testing. For the time being, <br />
I am appropriately making longer sentences. By the way, if you apply CSS gradation to letters,  <br />
using google font etc. makes a beautiful finish! <br />
I will postpone it ....  
It is surprisingly difficult to write long sentences without themes.  <br />
Also, although the story changes, I think that it is more beautiful recently that 
it is a flat design like a normal background rather than using a css gradation as the background of the title and the box background. <br />
Thank you very much for reading the sample text. And even English
</div>

シンプルなパターン

シンプルなパターンのサンプル

テキストの領域の上に徐々に濃くなる白のグラデーションを被せたパターンです。 今回はテキストに対して使用していますが、画像にも応用できます。

CSSコードを表示

.sample {
  position: relative;
  padding: 1.5em;
  border: 1px solid #ccc;
}
.sample:after {
  content: "";
  bottom: 0;
  left: 0;
  position: absolute;
  width:100%;
  height: 50%;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.6) 15%, rgba(255,255,255,1) 70%, rgba(255,255,255,1));
}

ホバーで文字が出てくるパターン

ホバーで文字が出てくるパターンのサンプル

グラデーションのかかったテキストの領域をマウスホバーすると、隠れた文字が表示されるパターンです。 高さが変化する時スムーズに動かしたい場合は、jsなどを合わせて使用するようにして下さい。

CSSコードを表示

.sample {
  position: relative;
  padding: 1.5em;
  border: 1px solid #ccc;
  height:100px;
  overflow:hidden;
}
    
.sample:after {
  content: "";
  bottom: 0;
  left: 0;
  position: absolute;
  width:100%;
  height: 50%;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.6) 15%, rgba(255,255,255,1) 70%, rgba(255,255,255,1));
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.sample:hover{
  height:auto;
}
.sample:hover:after{
  opacity: 0;
  visibility: hidden;
}

まとめ

今回は画像を使わずに、CSSで文字に対してグラデーションをかけたデザインを紹介しました。

装飾などはせず、グラデーションのパターンのみを紹介したので結構微妙なのも多いと思いますが、google fontsなどと合わせて使用するとオシャレになるので是非お試しを!