[CSS]シンプルなスタイルシートで書かれたグラデーションを使ったかっこいい背景のテクニック -Cool Gradient

ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。

ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。

デモは「radial-gradient」を使用しているため、モダンブラウザでご覧ください。IEは10+で。

Cool Gradient

実装は非常にシンプル、コピペで簡単に利用できます。

HTML

デモではdivとspanの二つを使用していますが、背景用にはdiv一つのみでOKです。

<div><span>Cool Background</span></div>

CSS

まずは、美しいグラデーションのスタイルシートから。
グラデーションの設定は楕円（ellipse）状でボックスの一番遠い角に合わせて（farthest-corner）います。

div {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #9ab1c7 0%, #1a242f 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
}

デモのようにテキストを天地左右の中央に配置させるには、下記のようになります。

div{
  font-family: 'Fira Sans', sans-serif;
  position:fixed;
  width:100%;
  height:100%;
  background-image: radial-gradient(ellipse farthest-corner at center top, lighten(@accent,5%) 0%, darken(@main, 10%) 100%);
  
}
span{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:lighten(@accent,25%);
  font-size:60px;
  line-height: 1;
  text-shadow: 1px 1px 2px #000;
        
}

美しいグラデーションは小さいサイズのパネルに適用することもできます。

コードはこんな感じになります。

div {
  position: absolute;
  width: 500px;
  height: 300px;
  background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #9ab1c7 0%, #1a242f 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
}
span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:lighten(@accent,25%);
  font-size:24px;
  line-height: 1;
  text-shadow: 1px 1px 2px #000;
         
}