Cara membuat background warna gradasi

 

Untuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari fitur CSS. Selain tampilan web menjadi lebih ringan, fitur CSS lebih mudah untuk mengatur pemilihan warna, nilai posisi warna, ketebalan warna, untuk membuat background dengan warna gradasi sesuai selera.
Dibawah ini beberapa contoh gradasi beserta kodenya, silahkan anda bisa mencoba untuk mengubah nilai - nilainya sesuai kebutuhan anda.

1. Gradasi warna terang atas

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-atas
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%, #c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#c4d69f));
}
</style>

<div class="terang-atas">TEKS DISINI</div>

2. Gradasi warna terang bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="terang-bawah">TEKS DISINI</div>

3. Gradasi Horisontal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="Horisontal-terang-tengah">TEKS DISINI</div>

4. Gradasi Horisontal warna terang atas bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-atas-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="Horisontal-terang-atas-bawah">TEKS DISINI</div>

5. Gradasi Vertikal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-tengah">TEKS DISINI</div>

6. Gradasi Vertikal warna terang kanan kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop
(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}

</style>

<div class="vertikal-terang-kanan-kiri">TEKS DISINI</div>

7. Gradasi Vertikal warna terang kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-kiri">TEKS DISINI</div>

8. Gradasi Vertikal warna terang kanan

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="vertikal-terang-kanan">TEKS DISINI</div>

9. Gradasi Vertikal warna terang kanan

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

Berikut kodenya :

<style type="text/css">
div.ellip-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius-topright: 700px 300px;
-webkit-border-radius-topright: 700px 300px;
-moz-border-radius-topleft: 700px 300px;
-webkit-border-radius-topleft: 700px 300px;
-moz-border-radius-bottomright: 700px 300px;
-webkit-border-radius-bottomright: 700px 300px;
-moz-border-radius-bottomleft: 700px 300px;
-webkit-border-radius-bottomrleft: 700px 300px;
padding: 40px;
margin-left: 60px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="ellip-terang-kanan">CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.</div>

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.