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

CSS NO IMAGE

背景色のCSS指定

サンプル1

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

cssコード

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

背景色のCSS指定

サンプル2

背景色の指定(+透明度指定) background-colorで指定

cssコード

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

背景色のCSS指定

サンプル3

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

cssコード

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

背景色のCSS指定

サンプル4

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

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

cssコード

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

背景色のCSS指定

サンプル5

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

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

cssコード

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

背景色のCSS指定

サンプル6

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

cssコード

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

背景色のCSS指定

サンプル7

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

cssコード

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

背景色のCSS指定

サンプル8

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

cssコード

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

背景色のCSS指定

サンプル9

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

cssコード

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

背景色のCSS指定

サンプル10

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

cssコード

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

背景色のCSS指定

サンプル11

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

cssコード

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

背景色のCSS指定

サンプル12

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

cssコード

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

背景色のCSS指定

サンプル13

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

cssコード

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

背景色のCSS指定

サンプル14

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

cssコード

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

背景色のCSS指定

サンプル15

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

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

cssコード

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

背景色のCSS指定

サンプル16

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

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

cssコード

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

背景色のCSS指定

サンプル17

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

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

cssコード

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