▲TOPへ戻る

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

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

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

background: radial-gradient(blue, purple);

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

background: radial-gradient(blue, purple,red, yellow);

開始位置

at + 位置(top, right, bottom, left)

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

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

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

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

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

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

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

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

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

    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で指定することもできます。

background: radial-gradient(at 50px 50px, blue, purple);

応用編

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;
}

rgba

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

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

まとめ

point

background: radial-gradient(方向, 色, 色);

方向: ➀ at + top, right, bottom, left 
        ➁ at + --px --px

アニメーションを使ったり、写真に重ねたりすることができる。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ