【CSS】文字を画像化せずにグラデーション効果を出す

グラデーション効果を出して少し凝ったロゴやテキストにしたいとき、
いちいち画像化させるのが面倒な方はこの方法がおすすめです。

HTML

<div class="grad"><span></span>CSSだけでグラデーション効果が出せます</div>

CSS

.grad {
	position: relative;
	color: #000;
	font-size: 24px;
	font-weight: bold;
}
.grad span {
	position: absolute;
	display: block;
	width: 100%;
	height: 32px;
	background: url(grad.png) repeat-x;
}

参考：http://webdesignerwall.com/tutorials/css-gradient-text-effect

.grad spanでは透過させた白いグラデーション画像を当てています。
この透過画像を変えることで、いろいろな効果をだすことができます。

画像も流用でき、CSS自体も短いので変更も楽に効果が出せるのがいいですね。