Cara Membuat Background Gradien Radial Menggunakan CSS 3

Background merupakan salah satu komponen dari desain yang sangat penting, pada pembahasan kali ini kita akan membuat sebuah Efek Gradien Radial, Efek Gradien Radial merupakan sebuah effect yang dihasilkan oleh perubahan antara dua buah warna tau lebih, nah pada Background Gradien Radial ini akan membentuk sebuah gradien warna yang membentuk sebuah lingkaran. Background Gradien ini juga dapat membuat tampilan website yang kita miliki menjadi lebih menarik, pada tutorial Cara Membuat Background Gradien Radial Menggunakan CSS 3 kita akan mencoba membuat sebuah background dengan menggunakan Greadiasi radial.

Cara Membuat Background Gradien Radial Menggunakan CSS 3 langkah pertama silahkan teman-teman buka text editornya selanjutnya silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html

<!DOCTYPE html>
<html>
<head>
	<title>Cara Membuat Background Gradien Radial Menggunakan CSS 3</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
</body>
</html>

Setelah kita membuat file index.html nya, selanjutnya kita akan membuat sebuah file untuk mengatur CSS dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css

*{margin:0; padding:0;}
.container {
    width: 500px;
    height:300px;
    margin:auto;
    background: -webkit-radial-gradient(circle, green, yellow, red); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, green, yellow, red); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, green, yellow, red); /* For Fx 3.6 to 15 */
    background: radial-gradient(circle, green, yellow, red); 
	padding:20px;}

Pada file style.css terdapat sebuah script background: radial-gradient(circle, green, yellow, red); yang berfungsi sebagai mengatur dari warna gradien yang ingin kita tampilkan, dan pada script tersebut teman-teman biasa mengganti warnanya sesuai dengan inginkan,  jika kita jalankan script yang terdapat diatas maka akan terlihat seperti dibawah ini.

Bagai mana teman-teman cukup mudah bukan Cara Membuat Background Gradien Radial Menggunakan CSS 3, sekian dulu tutorial saya kali ini tentang Cara Membuat Background Gradien Radial Menggunakan CSS 3.

Semoga bermanfaat

Terimakasih.