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.

Judul: Cara membuat background warna gradasi; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS PaddingProperti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti ... readmore
• Cara membuat gambar melayangCara membuat gambar melayang menggunakan properti float, properti float sangat sering digunakan untuk gambar. Dengan Properti float, sebuah gambar bisa dibuat melay ... readmore
• Cara Membuat Navigasi HalamanCara lain untuk memudahkan pengunjung mencari artikel yang ada pada blog kita adalah memberi tombol navigasi halaman yang berada dibawah artikel. Selain memberikan ... readmore
• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... readmore
• Modifikasi Tampilan Pesan Komentar Versi 2 Pada kesempatan kali ini saya akan membahas tentang cara memodifikasi tampilan pesan komentar. Sebelumnya sudah pernah saya bahas "Modifikasi Tampilan Pesan Ko ... readmore