【CSS】background: radial-gradientで背景をグラディエーションさせる方法

radial-gradientは中心から外側へと、放射状にグラディエーションします。

基本の書き方は、liner-gradientと一緒ですが、開始位置の指定が少し違います。

色を複数、選択することができます。ここまでは、liner-gradientと一緒です。

開始位置

at + 位置（top, right, bottom, left）

top：中心が要素の上辺になります。

right：中心が要素の右辺になります。

bottom：中心が要素の底辺になります。

left：中心が要素の左辺になります。

以下のような書き方もできます。

    background: radial-gradient(at top right, blue, purple);
    background: radial-gradient(at top left, blue, purple);
    background: radial-gradient(at bottom right, blue, purple);
    background: radial-gradient(at bottom left, blue, purple);

at + --px --px

中心を左上の角を基準にpxで指定することもできます。

応用編

cssのanimationを使う方法

値をいろいろ変えてみてください。

 .box{
    background: repeating-radial-gradient( red 0%, yellow 7.14%, rgb(0,255,0) 14.28%,
                rgb(0,255,255) 21.4%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
    background-size: 600vh 600vw;
    animation: slide 10s linear infinite forwards;

    @keyframes slide{
        0%{
            background-position-x: 0%;
        }
        100%{
            background-position-x: 600vw;
        }
  } 

写真に重ねる

以下の二つを重ねてみましょう。

rgbaをつかって背景色を半透明にします。

 .box{
    background: radial-gradient(rgba(255, 217, 0, 0.198) 50%, rgba(128, 0, 128, 0.664)), 
                url(../../images/mimi.png) ;
    height: 400px;
    background-size: cover;
    background-position: center center;
}

便利なジェネレーターを使う

簡単にグラディエーションを作るサイトがありますので活用しましょう。

まとめ