linear-gradientでグラデーション。背景をCSSで指定する

背景色の指定　background-colorで指定

cssコード

#bgc-sample01 {
            background-color: #87F5DF;
        } 

背景色の指定（+透明度指定）　background-colorで指定

cssコード

#bgc-sample02 {
            background-color: #87F5DF82;
        } 

背景色【単色】の指定（カラーネームで指定）　background-colorで指定

cssコード

#bgc-sample03 {
            background-color: skyblue;
        }

背景色の指定　グラデーション【2色指定】　background-image で指定

グラデーションはbackground-colorではなく、background-imageで指定する。

cssコード

#bgc-sample04 {
            background-image: linear-gradient(blue, aqua);
        } 

背景色の指定　グラデーション【2色指定 + 角度を 45 度に】

角度は正数の時は右回り、負数の場合は左回りに指定される。

cssコード

#bgc-sample05 {
    background: linear-gradient(45deg,aqua,blue);
} 

背景色の指定　グラデーション【2色指定 + 角度を -45 度に】

cssコード

#bgc-sample06 {
            background: linear-gradient(-45deg,aqua,blue);
        } 

背景色の指定　グラデーション【2色指定 + グラデーションの終点を left に指定】

cssコード

#bgc-sample07 {
            background: linear-gradient(to left,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を top に指定】

cssコード

#bgc-sample08 {
            background: linear-gradient(to top,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を right に指定】

cssコード

#bgc-sample09 {
            background: linear-gradient(to right,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を bottom に指定】

cssコード

#bgc-sample10 {
            background: linear-gradient(to bottom,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を top right に指定】

cssコード

#bgc-sample11 {
            background: linear-gradient(to top right,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を top left に指定】

cssコード

#bgc-sample12 {
            background: linear-gradient(to top left,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を bottom right に指定】

cssコード

#bgc-sample13 {
            background: linear-gradient(to bottom right,aqua,blue);
        }

背景色の指定　グラデーション【2色指定 + グラデーションの終点を bottom left に指定】

cssコード

#bgc-sample14 {
            background: linear-gradient(to bottom left,aqua,blue);
        }

背景色の指定　グラデーション【カラーストップの指定】

グラデーション開始から20%の位置にpurple、80%の位置にaquaを指定

cssコード

#bgc-sample15 {
            background: linear-gradient( 0deg, blue, mediumblue 20%, aqua 80%,lightcyan );
        }

背景色の指定　グラデーション【カラーストップの指定　+　角度指定】

グラデーション開始から70%の位置に lightblue 、70%の位置に darkblue を指定。角度を270度

cssコード

#bgc-sample16 {
            background: linear-gradient( 20deg,lightblue 70%,darkblue 70%);
        }

背景色の指定　グラデーション【カラーストップの指定　+　グラデーションの終点指定】

グラデーションの終点を top に指定　+　グラデーション開始から70%の位置に lightblue 、70%の位置に darkblue を指定

cssコード

#bgc-sample17 {
            background: linear-gradient(to top,lightblue 70%,darkblue 70%);
        }