Rahasia Membuat Gradasi Warna Conic Gradient di CSS yang Bikin Desainmu Makin Cetar!
Pernah nggak sih kamu lihat desain web dengan warna yang berputar seperti pelangi melingkar? Nah, itu bukan sulap, tapi efek keren yang namanya conic gradient di CSS. Kalau kamu pengen tahu gimana cara bikin gradasi warna yang unik ini, yuk kita kulik bareng-bareng! Dijamin, setelah baca ini, kamu bisa bikin tampilan web yang nggak cuma cakep tapi juga profesional.
Apa Itu Conic Gradient? Kenalan Dulu, Yuk!
Bayangin kamu lagi makan dadar gulung yang warnanya berlapis-lapis, tapi lapisan itu berputar mengelilingi tengah. Nah, conic gradient itu mirip banget sama konsep itu, tapi dalam dunia desain web. Berbeda dengan linear gradient yang warnanya berubah dari kiri ke kanan atau atas ke bawah, conic gradient menyebar warna mengelilingi satu titik pusat, seperti roda sepeda yang berputar.
Kalau di bahasa Jawa, kita bisa bilang ini seperti “nggiling warna” — artinya warna yang berputar mengelilingi pusat. Ini bikin desainmu jadi hidup dan dinamis, bukan cuma datar dan monoton.
Kenapa Harus Pakai Conic Gradient?
Bayangkan kamu sedang membuat poster acara kampung atau website UMKM yang ingin tampil beda. Dengan conic gradient, kamu bisa membuat efek visual yang menarik perhatian pengunjung. Misalnya, kamu bisa buat diagram lingkaran (pie chart) yang warnanya jelas dan eye-catching tanpa harus pakai gambar dari luar.
Ini seperti kamu punya pisang goreng yang rasanya sudah enak, tapi kamu tambahkan sambal spesial yang bikin orang lain jadi penasaran dan pengen coba.
Cara Membuat Conic Gradient di CSS: Langkah demi Langkah
1. Sintaks Dasar
Untuk mulai, kamu perlu tahu format dasarnya:
background-image: conic-gradient([dari sudut] [di posisi,] warna [derajat], warna [derajat], ...);
- Sudut awal (angle) defaultnya 0 derajat.
- Posisi pusat (position) defaultnya di tengah (center).
- Kalau kamu nggak tentuin derajat, warna akan terbagi rata mengelilingi pusat.
2. Contoh Gradasi dengan 3 Warna
#grad {
background-image: conic-gradient(red, yellow, green);
}
Hasilnya? Warna merah, kuning, dan hijau berputar mengelilingi titik pusat, seperti lampu lalu lintas yang berputar.
3. Gradasi dengan 5 Warna
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Ini seperti pelangi yang berputar, ada merah, kuning, hijau, biru, dan hitam yang tersebar merata.
Menentukan Derajat Warna: Biar Gradasi Makin Presisi
Kalau kamu pengen warna berubah di titik tertentu, kamu bisa tentukan derajatnya. Misalnya:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
Artinya:
- Merah dari 0° sampai 45°
- Kuning dari 45° sampai 90°
- Hijau dari 90° sampai 210°
Ini seperti kamu membagi kue ulang tahun jadi beberapa potongan dengan ukuran berbeda, biar semua orang kebagian sesuai porsi.
Membuat Pie Chart dengan Conic Gradient
Kalau kamu pernah lihat diagram lingkaran di presentasi, sekarang kamu bisa buat sendiri pakai CSS. Tambahkan saja:
border-radius: 50%;
di elemen yang kamu beri conic gradient, maka gradasi warna itu akan membentuk lingkaran sempurna.
Contoh Pie Chart Sederhana
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
Hasilnya seperti diagram lingkaran yang biasa kamu lihat di laporan keuangan atau presentasi bisnis.
Wow! Membuat Pie Chart dengan Warna yang Lebih Jelas
Kalau kamu ingin setiap warna punya bagian yang jelas dan tegas, coba ini:
#grad {
background-image: conic-gradient(
red 0deg, red 90deg,
yellow 90deg, yellow 180deg,
green 180deg, green 270deg,
blue 270deg
);
border-radius: 50%;
}
Setiap warna punya segmen 90 derajat, seperti potongan pizza yang jelas dan rapi. Ini cocok banget buat kamu yang pengen visualisasi data sederhana tanpa ribet.
Mengatur Sudut Awal dan Posisi Pusat Gradasi
Kalau kamu ingin gradasi dimulai dari sudut tertentu, pakai from angle:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
Ini artinya gradasi dimulai dari 90 derajat, bukan dari 0 derajat.
Kalau mau geser posisi pusat gradasi, pakai at position:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
Jadi pusatnya bukan di tengah, tapi bergeser ke 60% dari kiri dan 45% dari atas. Ini kayak kamu geser lampu sorot di panggung supaya fokus ke tempat tertentu.
Membuat Pola Berulang dengan Repeating Conic Gradient
Kalau kamu suka pola yang berulang-ulang, pakai repeating-conic-gradient():
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Hasilnya pola garis-garis merah dan kuning yang berulang, seperti batik parang yang khas.
Kalau mau pola berulang dengan warna yang lebih kompleks:
#grad {
background-image: repeating-conic-gradient(
red 0deg 10deg,
yellow 10deg 20deg,
blue 20deg 30deg
);
border-radius: 50%;
}
Pola ini akan diulang terus sampai memenuhi area, seperti motif batik yang berulang tanpa putus.
Cerita Seru: Dari Warna Biasa Jadi Desain Kekinian
Saya pernah membantu teman yang punya usaha kerajinan tangan di Solo. Dia mau bikin website yang tampil beda supaya pembeli online makin tertarik. Awalnya, desain webnya polos banget, cuma warna satu tone. Setelah saya tambahkan conic gradient sebagai background di bagian header, wow, pengunjung jadi betah lihat websitenya.
Seperti kata orang Jawa, “ojo lali ngopeni tampilan” — jangan lupa merawat tampilan. Karena tampilan yang menarik itu ibarat gula jawa di kopi pahit, bikin rasanya jadi manis dan nagih.
Pertanyaan untuk Kamu
- Pernahkah kamu melihat desain web yang membuatmu terpana hanya karena warna dan gradasinya?
- Bagaimana kalau kamu coba buat sendiri conic gradient untuk website atau proyek desainmu berikutnya?
- Apakah kamu sudah siap membuat desain yang bukan hanya cantik tapi juga punya nilai fungsional seperti pie chart interaktif?
Kesimpulan: Transformasi Desain dengan Conic Gradient
Conic gradient bukan cuma soal warna yang berputar, tapi juga cara baru untuk mengekspresikan kreativitas dalam desain web. Dengan teknik ini, kamu bisa bikin tampilan yang lebih hidup, menarik, dan informatif tanpa perlu ribet pakai gambar atau plugin tambahan.
Kalau kamu mulai dari sini, pelan-pelan kamu akan jadi desainer yang bisa mengolah warna seperti seniman, bukan cuma programmer. Ingat, desain itu seperti nggiling kopi di warung kopi: butuh ketelatenan dan sentuhan pribadi supaya hasilnya mantap.
Jadi, ayo mulai eksplorasi conic gradient di proyekmu sekarang! Jangan lupa share hasil karyamu, biar kita sama-sama belajar dan berkembang.
