見出しや文章の文字（テキスト）に、影や色を付けたり回転させたりと、さまざまな効果（エフェクト）を加えることができます。エフェクトは、簡単なCSSの記述で実現することができます。
それでは、いくつかデザインとコードをご紹介していきます。
コードはコピペで利用できます。お気軽にご活用ください。
目次
使い方
HTMLはこちらをコピーしてご利用ください。
デザインサンプルはこのソースに対してCSSを適用させています。
<h2 class="effect">TEXT DESGIN</h2>デザインサンプル
影（シャドウ）
.effect {
color: #8bd3dd;
text-shadow: 2px 2px 4px rgba(0, 175, 195, 0.3);
}text-shadowのプロパティで影を付けることができます。
最初の2pxで水平方向にずらす距離（オフセットの値）を、
次の2pxで垂直方向にずらす距離を、
次の4pxでぼかしの大きさを指定しています。rgba(0, 175, 195,で影の色を指定し、0.3でその色の透明度を指定しています。0に近いほど透過します。
ぼかし
.effect {
color: rgba(255, 255, 255, 0);
text-shadow: 0px 0px 8px rgba(0, 175, 195, 0.7);
}全体的にテキストをぼやかしたデザインです。文字を透明にし、影だけ残す、ということを行っています。
rgba(255, 255, 255,で文字を白色に指定し、0で透明にしています。
影は、text-shadowで作り、8pxぼかしています。
ネオン風１（グロー）
.effect {
color: #f6ca07;
text-shadow: 0px 0px 10px rgb(255, 208, 0);
}テキストをネオン風に光っているように見せるデザインです。
文字色は黄色（#f6ca07）にして、text-shadowで影を付け、その影を10pxぼかすことでグロー効果付けています。
ネオン風２（グロー）
.effect {
color: #ffffff;
text-shadow: 0px 0px 10px rgb(255, 208, 0);
}文字色は白色（#ffffff）にしたバージョンです。
背景をグラデーション
.effect {
padding: 0.5em;
text-align: center;
color: #fff;
background: linear-gradient(to right, #ffd803, #f582ae);
}文字色は白色（#ffffff）にして、backgroundで背景色を付けています。
to rightは「左から右へ」の意味。左の黄色（#ffd803）から右のピンク色（#f582ae）へグラデーションがかかります。
テキストをグラデーション
.effect {
background: linear-gradient(to right, #ffd803, #f582ae);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}ちょっと複雑です。
まず、background: linear-gradient(to right, #ffd803, #f582ae);で、背景を黄色からピンク色へグラデーションをかけています（文字ではなく四角い状態の塗りつぶしです）。
-webkit-background-clip: text;で、その背景を文字の形に切り取っています。
背景で文字の形ができているので、本来の文字の色・装飾は不要です。-webkit-text-fill-color: transparent;で本来の文字自体を透明にして、背景だけ残しています。
先頭文字を装飾
.effect { color: #8bd3dd; }
.effect::first-letter {
font-size: 1.5em;
color: #ffd803;
}::first-letterの疑似要素で、先頭の１文字に対してデザインを付けることができます。font-size: 1.5em;で、通常の1.5倍のフォントサイズを指定しています。
雑誌などにたまに使われるようなデザインですね。
アンダーライン（マーカー風）
.effect {
background: linear-gradient(transparent 50%, #ffd803 50%);
}マーカーを引いたようなデザインで、ウェブサイトでけっこう見かけます。backgroundのプロパティを使い、背景色のグラデーションを工夫することで実現しています。
transparent 50%で、グラデーションの開始地点から中間地点（50%）までの間を、透明（transparent）な色で指定しています。#ffd803 50%で、グラデーションの中間地点（50%）から終了地点までの間を、黄色（#ffd803）で指定しています。
50%地点で色を切り替えている形になっています。
疑似要素による装飾
.effect::before,
.effect::after {
content: '★';
color: #ffd803;
}::beforeの疑似要素で、テキストの前に要素を追加しています。::afterの疑似要素で、テキストの後に要素を追加しています。
追加している要素がcontent: '★'です。星のテキストを入れています。
３D風
.effect {
color: #ffd803;
text-shadow: 5px 5px 0 #ffffff, 6px 6px 0 #ffd803;
}text-shadowのプロパティで影を２つ付けています。
text-shadow: 5px 5px 0 #ffffffが1つめの影で、水平・垂直方向に5pxずらし、白色（#ffffff）の影を付けています。
続けて、6px 6px 0 #ffd803が２つめの影です。白色の影の5pxよりもさらに1pxずらし、黄色（#ffd803）の影を付けています。
色の違う２つの影を重ねることで、3D風のデザインになっています。
回転
.effect {
color: #8bd3dd;
transform: rotate(-5deg);
}transformプロパティでテキストを回転（rotate）させることができます。rotate(-5deg)で、反時計回りに5度回転させています。例えば45度傾けたい場合はrotate(-45deg)となります。整数を入れると時計回りに回転します。
透過（画像の上にテキスト）
<div class="effect">
<h2>TEXT DESGIN</h2>
</div>.effect {
text-align: center;
background-image: url(image.jpg);
}
.effect h2 {
color: #ffffff;
padding: 0.5em;
opacity: 0.7;
}こちらだけ他とHTMLが異なります。background-image: url(image.jpg);で、背景に画像を入れています。
そこに、白色（#ffffff）の文字を重ねています。（文字の形をくり抜いたようになります）
さらに、opacityで文字の透過を行っています。0に近いほど透過します。
文字が少し透明になって、背景画像が透けている感じになっていますね。
各エフェクトをいろいろ組み合わせると、デザインの幅はもっと広がりますね。
見出しデザインのこちらの記事も参考にどうぞ。
