テキストやボーダーにグラデーションをかける

css3でテキストグラデーション、ボーダーグラデーションをかけましょう！

テキストグラデーション

html記述

今回はh2をグラデーションにします

<h2>タイトル</h2>

CSS記述

h2{
color: #ff69b4;　/*cssが効かない時のために必須です*/
background: -webkit-linear-gradient(90deg, #ffc0cb 0%, #ff1493 100%);
/*背景色としてグラデーションを入れます。*/
/*0％、100％だけですが細かく設定したいときは細かく％で設定OK*/
-webkit-background-clip: text;　/*テキストをくり抜くという意味*/
-webkit-text-fill-color: transparent;　/*透明にするということ*/
/*要するにテキストを透明にして背景色を入れるということになります*/
}

borderグラデーション

上記のh2にborder-bottomをいれることにします

CSS記述

h2{
border-image: linear-gradient(to right, #b4761e 0%, #000 100%) 1/0 0 3px 0;
/*1はborder-image-slice: 1;という意味です*/
/*0 0 3px 0はbottomだけ3pxということ一行で記載できます*/
border-style: solid;
}

cssでグラデーションが簡単に！！
是非お試しください。