ボックスの背景に放射状グラデーションをかけたい
線状グラデーションだけでなく、放射状のグラデーションをかけることもできます。放射状のグラデーションをかけることもできます。放射状グラデーションを適用する際は、background（または、background-image）プロパティの値に「radial-gradient()」を使用します。開始色と終了色を指定して円形のグラデーションをかけています。
線状グラデーションを適用するliner-gradient()、放射状グラデーションを適用するradial-gradient()は正式な書式は複雑なため、画像処理アプリケーションやWebサービスを利用するのがよいです。また、Adobe PhotoshopにはグラデーションのCSSソースコード書き出し機能もあります。
グラデーションのCSS書き出しWebサービス
書式：放射状グラデーション
background: radial-gradient（開始色,終了色）;<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.sale-box{
margin: 0 auto;
padding: 80px;
width: 600px;
background: radial-gradient(#ff7f82,#dcffb8);
}
.copy{
margin: 0;
text-align: center;
font-size: 80px;
color:#ffffff;
}
</style>
</head>
<body>
<div class="sale-box">
<p class="copy">LAST SALE</p>
</div>
</body>
</html>実行結果
