わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるので幾つか紹介します。
※以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。
また、ベンダープレフィックスなどは必要に応じて追記・変更してください。
ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。
※実装自体はスマートフォンなどでも問題ないですが、デモの確認はPC推奨です。
CSSグラデーションを使ったデザインパーツサンプル 目次
1. テキストが徐々に見えなくなる #1
イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキストが見えなくなっていくという見せ方です。
例えば、ブログなどの記事一覧にある抜粋表示部分があまり長くなってほしくないという場合、よくあるのは文字数を制限して設定した文字数以上の場合は「…」を表示するなどしますが、この方法を使うことでその代替案的な感じで更にCSSだけで実装することが可能です。
この見せ方は当ブログの記事一覧でも使用しており、たまにどのように実装しているのかご質問もいただくのですが、HTMLとCSSをそれぞれ以下のように記述することで実装できます。
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>CSS
p {
position: relative;
padding: 20px;
border: 1px solid #ddd;
}
p::after {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
content: '';
width: 100%;
height: 50%;
background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.7) 20%, rgba(255,255,255,1) 80%);
}※pに指定しているpaddingとborderは装飾なので、なくても問題ないです。
見たまんまですが、まず親要素（今回のサンプルではp要素）にposition: relative;を指定し、あとは擬似要素で段々と濃くなっていくグラデーション要素を作成し、それをテキストの上に重ねることで徐々にテキストが見えなくなっていくような見せ方をできます。
もう少し見えなくなっていく領域を狭めたいなど、表示領域を調整したい時はheightかbackgroundの値を変更していけば任意の位置に調整できます。
ちなみに、このまま使用するともちろんテキストが長ければ長いほど下にどんどん長くなっていきます。
なので、当ブログの記事一覧のようにテキストの長さに関係なく同じ高さで表示させたいという時は親要素（今回のサンプルではp要素）に表示させたい領域分のheight指定をし、はみ出てしまったテキストを見えなくするためにoverflow: hidden;を追記してあげれば、思うような見た目になると思います。
2. テキストが徐々に見えなくなる #1 ＋ Hover
先ほどのものに＋αで動きをつけたものになり、実際の動きは用意したいデモ画面（閲覧はPCでしてください）で確認してほしいのですが、テキストにHoverするとグラデーション部分が消えて見えなくなっていたテキストが全て表示されるという動きにすることもできます。
基本的な記述は先ほどと同じようなものを使用する形で以下のように記述することで実装できます。
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>CSS
p {
position: relative;
padding: 20px;
border: 1px solid #ddd;
}
p::after {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
content: '';
width: 100%;
height: 50%;
background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.7) 20%, rgba(255,255,255,1) 80%);
transition: all .3s;
}
p:hover::after {
opacity: 0;
visibility: hidden;
}※pに指定しているpaddingとborderは装飾なので、なくても問題ないです。
擬似要素にtransitionを追記し、次に擬似要素の:hover時にopacity: 0;とvisibility: hidden;を指定することで、テキストにHoverするとふわっとグラデーション部分が消えてテキスト全体が見えるような見た目を実装することができます。
ここではグラデーション部分を非表示にしているだけですが、予め「もっと見る」などのリンクなどをグラデーション下に隠しておいて、Hoverするとてテキスト全体が見える＋「もっと見る」が表示されるといった動きなどもできるかと思います。
※もちろんパッと見ではユーザーがそのような動きになっているのはHoverするまで分かりづらいので、実際に使う際はもう少し工夫して配置した方が良いとは思います。
3. テキストが徐々に見えなくなる #2
先ほどはテキストが基本的に縦に伸びていく場合に使える方法でしたが、イメージのように横で使うことももちろん可能です。
例えば、イメージのようなリストがありテキストは1行分しか表示させたくないという時、よくあるのだとtext-overflow: ellipsis;を利用して、領域以上になる部分は「…」と表示させるといったことがCSSで実装可能ですが、これを以下のように記述することでその代替案的な感じで実装することができます。
HTML
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
</ul>CSS
ul {
border-top: 1px solid #ddd;
list-style: none;
}
ul li {
position: relative;
padding: .5em;
border-bottom: 1px solid #ddd;
white-space: nowrap;
overflow: hidden;
}
ul li::after {
position: absolute;
top: 0;
right: 0;
z-index: 2;
content: '';
width: 50%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.7) 20%, rgba(255,255,255,1) 80%);
}※paddingやborderは装飾なので、なくても問題ないです。
まずtext-overflow: ellipsis;を使う時と同じように、li要素にwhite-space: nowrap;とoverflow: hidden;を使って、リストの内容が1行表示になるように指定し、更にposition: relative;を指定しておきます。
あとはli要素の擬似要素を使う形でグラデーションを上に重ねることで、イメージのように右にいくに連れてテキストが徐々に見えなくなるという見た目を実装できます。
もう少し見えなくなっていく領域を狭めたいなど、表示領域を調整したい時はwidthかbackgroundの値を変更していけば任意の位置に調整できます。
4. カルーセルの左右を徐々に見えなくする
カルーセルで前後のコンテンツを少し見切れさせて（少し表示して）他にも沢山のコンテンツがあるように見せるデザインがありますが、そこにグラデーションを組み合わせて表現してみたものです。
実装にはHTMLとCSSをそれぞれ以下のように記述し、HTMLはカルーセルなどを表示させる部分に親要素を追加、CSSでその追加した要素を利用して作った擬似要素を用いることでイメージのような見栄えにできます。
HTML
<div class="carousel">
<!-- ここにカルーセル用のHTMLを記述 -->
</div>CSS
.carousel {
position: relative;
}
.carousel::before,
.carousel::after {
position: absolute;
top: 0;
z-index: 2;
content: '';
width: 100px;
height: 100%;
}
.carousel::before {
left: 0;
background: linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
}
.carousel::after {
right: 0;
background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
}ここではわざわざ親要素を追記する形で紹介しましたが、もちろん組み方によってはカルーセル表示部分を利用することで追記する必要はなく、その際はHTMLは特に変更せずCSSを少し変更すれば実装できると思います。
5. イメージを徐々に見えなくする
説明が分かりづらいかもしれませんが、画像とテキストをそのまま表示するとイメージ上部のように画像とテキストの境界がはっきりとわかる形で表示されると思いますが、それにグラデーションを組み合わせることでイメージ下部のように画像とテキストの境界がないような見せ方ができます。
HTML
<div class="hero"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>CSS
.hero {
height: 300px;
background: linear-gradient(rgba(255,255,255,0) 70%, rgba(255,255,255,1)), url(img_hero.png) center bottom / cover no-repeat;
}.heroが指定されたdiv要素に背景画像とグラデーションの記述を併記することで、先ほどのイメージのように画像の下の方が徐々に見えなくなっていくような見た目にできます。
ベースの背景カラーが白の場合は今回のサンプルをそのまま使用できますが、他のカラーの場合はlinear-gradientのカラー指定部分を任意で変更してください。
注意点としては、基本的にこの方法はベースの背景カラーが単色の場合（グラデーションの場合は上手いことやれば実装できます）に使えるものなので、例えばベースの背景部分に複雑なパターンやテクスチャがあるような場合は使えないと思います。
また、表示する画像によっては綺麗な見た目にならないのでその点も注意が必要です。
今回は画像も背景画像で指定して表示する形で紹介しましたが、imgで表示させた画像でこのような見た目を実装することももちろん可能です。
方法としては「1. テキストが徐々に見えなくなる #1」で紹介した内容と同じで、まず<div class="hero"></div>の中にimgを配置し、.heroを利用した擬似要素を使ってimgの上に重なる形でグラデーションを配置すれば、イメージのように画像下部が徐々に見えなくなっていくような見た目を実装できます。
6. グラデーションのボーダー
グラデーションのボーダーを実装する方法で、このような見せ方の場合は他にも方法がありますが、ここではbackground-origin: border-box;を利用した方法で、HTMLとCSSをそれぞれ以下のように記述します。
HTML
<div class="box">
<div></div>
</div>CSS
.box {
border: 5px solid transparent;
background-image: linear-gradient(#e55d87, #5fc3e4);
background-origin: border-box;
}
.box div {
height: 200px;
background-color: #fff;
}※.box divで指定しているheightはサンプルの見栄え用になるので、必要なければ削除して問題ないです。
7. 破線をCSSグラデーションで表現
一般的にCSSで破線を引くとなるとborder-top: 1px dashed #000;のようにして指定することが多いと思いますが、それをグラデーションを使って実装する方法です。
グラデーションを使って実装することでイメージのように単純にdashedを指定したものとは違う間隔の破線を実装できたり、単色ではなくグラデーションカラーの破線を画像を使わずに実装することが可能です。
実装にはHTMLとCSSをそれぞれ以下のように記述し、イメージの上から.border01・.border02・.border03・.border04の実装方法となります。
HTML
<hr class="border01" />
<hr class="border02" />
<hr class="border03" />
<hr class="border04" />CSS
.border01 {
height: 1px;
background-image: linear-gradient(90deg, #000, #000 50%, transparent 50%, transparent 100%);
background-size: 10px 1px;
border: none;
}
.border02 {
height: 1px;
background-image: linear-gradient(90deg, #000, #000 75%, transparent 75%, transparent 100%);
background-size: 20px 1px;
border: none;
}
.border03 {
height: 1px;
background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(90deg, #e55d87, #5fc3e4);
background-size: 10px 1px, 100% 1px;
border: none;
}
.border04 {
height: 3px;
background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(90deg, #69d2e7, #a7dbd8, #e0e4cc, #f38630, #fa6900);
background-size: 10px 3px, 100% 3px;
border: none;
}それぞれheightやbackground-sizeの値を変更するなどすれば、先ほどのイメージのようなオリジナルのボーダーの見栄えにするだけでなく、太さや間隔なども任意で設定することが可能です。
以上、CSSグラデーションを使ったデザインパーツサンプルでした。
今回はいずれも個人的によく利用する感じのものを紹介してきたのですが、他にもこういった使い方できるというのがあれば是非教えてください :)
また、CSSグラデーションはここで紹介したもの以外にも以下のような使い方をすることもできますので、興味ある方はこちらもどうぞ。