Blog

HOME > Web > css > 【CSS】背景色をグラーデーションにする（上下編）

【CSS】背景色をグラーデーションにする（上下編）

2016/02/13

css

備忘録です。

先日、左右で背景色を変える方法について記事を書きましたが、
今回は背景色が上下でグラーデーションになる方法です。

CSS

body {
    background: linear-gradient(#C33764, #1D2671 ) fixed;
}

サンプル

特定のdivの上下を色分けする

div.sample{
    background-image: linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
    background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
    background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
    background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
    background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
}

サンプル

円形のグラデーション
radial-gradientにする

body {
    background: radial-gradient(#C33764, #1D2671 ) fixed;
}

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ