はじめに

CSSでグラデーションを背景に、かつ固定する書き方についてです。

コード

html,body {

    height: 100%
    
}

body:after {

    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    content: "";
    z-index: -1;
    background: linear-gradient(to right bottom, #5dc4cb, #4ad8c6, #60e9b0, #92f78e, #d0ff66)fixed;
    
}

詳細

とりあえず高さは画面いっぱいにしておきたいので、height: 100%を指定。次のbody:afterの部分はあまり必要ない部分なのだけど、bodyに直書きだとiOSで背景が固定されないので、疑似要素をfixedで画面全体に背景として配置してグラデーションを記述しています。

なお、linear-gradientの数値を変更するにはジェネレーターを使用するのが手っ取り早いのでオススメ。

動作サンプル

codepen上で確認してみます。

See the Pen webpage sample by ysko909 (@ysko909) on CodePen.

おわりに

背景に限らずグラデーションは重宝するので、使い方を覚えておきたいものです。