Dasar-Dasar Gradien CSS
Gradien CSS adalah transisi visual antara dua warna atau lebih yang dirender oleh browser web. Alih-alih menggunakan gambar statis, gradien didefinisikan melalui kode CSS, yang membuatnya responsif dan cepat dimuat. Alat Gradient Generator memfasilitasi pembuatan kode ini dengan menyediakan kontrol visual untuk tiga jenis gradien utama: linear, radial, dan conic.
Saat pertama kali memuat alat ini, gradien awal dikonfigurasi dengan dua color stops default, yaitu #6366f1 0% dan #ec4899 100%. Pengguna dapat langsung melihat pratinjau visual dari gradien tersebut dan menyalin kode CSS yang dihasilkan.
Memahami Gradien Linear: Arah dan Color Stops
Gradien linear memadukan warna di sepanjang garis lurus. Arah dari perpaduan warna ini ditentukan oleh sudut yang diatur melalui slider sudut.
Aturan arah sudut pada gradien linear meliputi:
- 0°: Arah gradien menunjuk langsung ke atas.
- 90°: Arah gradien menunjuk ke kanan.
Perubahan sudut ini akan menggeser garis lurus tempat warna saling berbaur, mulai dari titik awal (0%) hingga titik akhir (100%). Pengguna dapat menyesuaikan sudut ini secara presisi untuk mengarahkan aliran warna secara diagonal, vertikal, atau horizontal sesuai kebutuhan desain.
Menjelajahi Gradien Radial: Bentuk dan Distribusi Warna
Berbeda dengan gradien linear yang bergerak di sepanjang garis lurus, gradien radial menyebarkan warna keluar dari titik pusat. Gradien jenis ini tidak menggunakan pengaturan sudut. Sebagai gantinya, bentuk penyebaran warna ditentukan oleh pilihan bentuk geometri.
Terdapat dua pilihan bentuk untuk gradien radial:
- Elips (ellipse): Warna menyebar mengikuti bentuk lonjong atau oval.
- Lingkaran (circle): Warna menyebar secara merata dengan radius yang sama ke segala arah dari titik pusat.
Distribusi warna menyebar secara konsentris dari dalam ke luar, menciptakan efek kedalaman atau pencahayaan bulat pada elemen web.
Gradien Conic: Menyapu Warna di Sekitar Titik Pusat
Gradien conic menyapu warna di sekitar titik pusat, serupa dengan tampilan roda warna atau bagan pai. Seperti pada gradien linear, gradien conic menggunakan pengaturan sudut untuk menentukan titik awal sapuan warna tersebut.
Pada gradien conic:
- Sudut 0° memulai sapuan warna dari arah atas.
- Sudut 90° memulai sapuan dari arah kanan.
Warna-warna yang didefinisikan dalam color stops akan berputar searah jarum jam mengelilingi titik pusat sebesar 360° untuk membentuk transisi melingkar.
Peran Color Stops dalam Desain Gradien
Setiap color stop adalah warna spesifik yang dipatok pada posisi tertentu di sepanjang alur gradien. Posisi ini dinyatakan dalam persentase, mulai dari 0% pada titik awal hingga 100% pada titik akhir.
Aturan penggunaan color stops pada alat ini meliputi:
- Jumlah Minimum dan Maksimum: Gradien membutuhkan minimal dua warna untuk membentuk transisi. Anda dapat menambahkan hingga delapan color stops untuk menciptakan transisi warna yang lebih kompleks.
- Posisi Default: Setiap kali Anda menambahkan color stop baru dengan menekan tombol "Tambah stop", posisi default untuk stop baru tersebut diatur otomatis pada 50%.
- Batas Maksimum: Ketika jumlah color stops telah mencapai batas maksimal delapan warna, tombol "Tambah stop" akan dinonaktifkan secara otomatis.
Panduan Penggunaan Gradient Generator
Untuk membuat gradien CSS menggunakan alat ini, ikuti langkah-langkah berikut:
- Pilih Jenis Gradien: Pada bagian "Jenis gradien", pilih antara "Linear", "Radial", atau "Conic".
- Atur Arah atau Bentuk:
- Jika memilih "Linear" atau "Conic", sesuaikan slider "Sudut" (0° hingga 360°).
- Jika memilih "Radial", tentukan "Bentuk" antara "Elips" atau "Lingkaran".
- Konfigurasi Color Stops:
- Tentukan warna pada "Warna stop".
- Atur persentase pada "Posisi" (0% hingga 100%) untuk menggeser lokasi warna tersebut.
- Gunakan tombol "Tambah stop" untuk menambah warna baru (maksimal 8), atau "Hapus stop" untuk mengurangi warna.
- Salin Kode: Setelah melihat pratinjau visual yang sesuai, klik tombol "Salin CSS". Setelah diklik, teks pada tombol akan berubah menjadi "Copied" untuk menandakan bahwa kode CSS telah disalin ke papan klip Anda.
Setiap gradien dirender langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.
Pertanyaan yang Sering Diajukan (FAQ)
Apa perbedaan antara gradien linear, radial, dan conic? Gradien linear memadukan warna di sepanjang garis lurus yang arahnya ditentukan oleh sudut. Gradien radial menyebarkan warna keluar dari titik pusat dalam bentuk lingkaran atau elips. Gradien conic menyapu warna di sekitar titik pusat seperti roda warna.
Apa yang dimaksud dengan color stops? Setiap color stop adalah warna yang dipatok pada posisi tertentu di sepanjang alur gradien — 0% di titik awal, 100% di titik akhir. Geser titik stop untuk memindahkan area puncak warna tersebut, atau tambahkan lebih banyak stop untuk perpaduan warna yang lebih kaya. Anda dapat menggunakan hingga delapan stop.
Bagaimana cara mengontrol arah gradien? Untuk gradien linear atau conic, slider sudut menentukan arah alur warna — 0° mengarah ke atas, 90° mengarah ke kanan. Gradien radial tidak memiliki sudut; sebagai gantinya, pilih bentuk lingkaran (circle) atau elips (ellipse) untuk mengubah cara penyebaran warnanya.