▲TOPへ戻る

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

background: linear-gradientとは

二つ以上の平行する色が徐々に変化します。

書き方

background: linear-gradient(方向, 色, 色);と指定します。

background: linear-gradient(blue, purple);

色はカンマ「,」で増やすことができます。

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

方向の指定

to + top, right, bottom, left

初期値はto bottomです。方向を何も書かない時と同じです。

background: linear-gradient(to bottom,blue, purple);

to rightで左から右へ

background: linear-gradient(to right,blue, purple);

to leftで右から左へ

background: linear-gradient(to left, blue, purple);

to topで下から上へ

background: linear-gradient(to top, blue, purple);

数値deg

30deg

background: linear-gradient(30deg, blue, purple);

60deg

background: linear-gradient(60deg, blue, purple);

90deg = to right

background: linear-gradient(90deg, blue, purple);

応用編

linear-gradientを複数使う

   .box{
        background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
    }

CSSのanimationを使う

    .box11{
        background: repeating-linear-gradient(-45deg, 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: 600vw 600vw;
        animation: slide 10s linear infinite forwards;
    }
    @keyframes slide{
        0%{
            background-position-x: 0%;
        }
        100%{
            background-position-x: 600vw;
        }
    } 

写真にかぶせる

      .box12{
            background: linear-gradient
                            (to top, 
                            rgba(0, 0, 255, 0.198), 
                            rgba(255, 0, 0, 0.274)), 
                            url(../../images/blog/202006/11\ \(10\).jpg);
            background-size: cover;
            background-position: center center;
        }
オリジナル
rgba

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

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

まとめ

backgroundlinear-gradientについて解説しました。 設定を変えて、オシャレな背景をいろいろ作ってみましょう。

point

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

方向: ➀ to + top, right, bottom, left
        ➁ 数値 + deg

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

profile

gaoさん

パソコン好きなガオ

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