Desain Gradien CSS dengan Pratinjau
Desain gradien CSS dengan memilih warna, sudut, dan tipe, lihat pratinjau langsung, lalu salin kodenya.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Dirakit di perangkat
Aman untuk merek yang belum diluncurkan
Tanpa akun
Koneksi aman
Cara kerjanya
- 1
Pilih warnanya
Tetapkan warna awal dan akhir, lalu tambahkan titik di antaranya kalau transisinya perlu diarahkan.
- 2
Atur arah atau bentuk
Pilih sudut untuk gradasi linear, atau bentuk dan posisi untuk gradasi radial.
- 3
Salin CSS-nya
Bawa deklarasi `background` yang dihasilkan langsung ke stylesheet Anda.
Mengapa memakai alat ini
Terlihat sambil disusun
Gradasi dinilai dari bagian tengahnya, bukan dari ujungnya — pratinjau langsung menunjukkan bagian yang justru bermasalah.
CSS siap salin
Keluarannya deklarasi `background` yang sah dan terformat rapi, tanpa perlu dirapikan sebelum ditempel.
Linear dan radial
Kedua jenis dengan kendali sudut atau bentuk, dan itu mencakup hampir semua gradasi yang dibutuhkan sebuah situs.
Beberapa titik warna
Tambahkan titik untuk mengarahkan jalur antar-warna, alih-alih menerima apa pun yang diberikan titik tengahnya.
Tidak ada yang diunggah
Deklarasinya dirakit di browser Anda — tidak ada nilai warna yang dikirim ke mana pun.
Gratis tanpa akun
Tanpa pendaftaran, tanpa batas, dan tanpa watermark.
Bagian tengah yang keruh, dan kenapa itu terjadi
Kekecewaan paling umum pada gradasi adalah dua warna yang menarik justru menghasilkan pita kelabu kecokelatan yang kusam di antaranya. Ini bukan kegagalan desain melainkan kegagalan matematis: browser menginterpolasi gradasi di ruang sRGB, mencampur kanal merah, hijau, dan biru secara terpisah dan dalam garis lurus. Campurkan biru jenuh dengan kuning jenuh dengan cara itu, dan titik tengahnya memuat kadar menengah dari ketiga kanal — yang persis merupakan definisi abu-abu. Efeknya paling parah antara warna yang berjauhan di roda rona — biru ke kuning, merah ke hijau — dan nyaris tak terasa antar-warna bertetangga. Mengenalinya sebagai aritmetika alih-alih selera itulah yang membuatnya bisa diperbaiki.
Memperbaikinya dengan satu titik antara
Obat praktisnya adalah berhenti membiarkan browser memilih jalurnya. Tambahkan titik warna di tengah dan setel ke rona yang seharusnya dilalui transisi itu — gradasi biru ke kuning yang dirutekan lewat hijau atau tosca tetap hidup sepanjang jalan, karena Anda sudah memberi tahu proses interpolasinya harus lewat mana alih-alih membiarkannya memotong pusat netral. Memilih warna tengah itu paling mudah dilakukan di HSL, tempat Anda bisa mengambil sudut rona di antara kedua ujung dan menjaga saturasinya tetap tinggi; konverter warna mengubah nilai itu menjadi HEX yang diminta deklarasinya. Satu titik yang ditempatkan dengan baik memperbaiki sebagian besar gradasi yang tampak pudar.
Linear dan radial, kapan masing-masing cocok
Gradasi linear berjalan di sepanjang sumbu lurus pada sudut yang Anda tetapkan — 180deg dari atas ke bawah, 90deg dari kiri ke kanan, dan apa pun di antaranya. Ia pilihan tepat untuk latar halaman, pita hero, atau isian tombol, karena mata membacanya sebagai bidang, bukan sebagai objek. Gradasi radial menyebar keluar dari satu titik, sehingga terbaca sebagai sumber cahaya atau pendar. Radial cocok untuk efek sorot di belakang elemen utama dan gagal sebagai latar satu halaman penuh, di mana ia cenderung tampak seperti vinyet yang tak diminta siapa pun. Kalau ragu, jawabannya hampir selalu linear.
Gradasi dan teks tidak mudah berdampingan
Gradasi di belakang teks adalah salah satu kegagalan aksesibilitas paling konsisten di web, dengan alasan yang bersifat struktural: syarat kontras berlaku pada tiap titik yang dilalui teksnya, sedangkan gradasi menurut definisinya punya latar berbeda di setiap titik. Judul yang melewati 4,5:1 terhadap ujung terang sebuah gradasi bisa jatuh di bawah 3:1 terhadap ujung gelapnya, dan hasil lulus di satu ujung tidak mengatakan apa pun tentang ujung yang lain. Uji warna teksnya terhadap kedua ujung dengan pemeriksa kontras, dan kalau salah satunya gagal, solusinya panel solid di belakang teks, bukan warna teks yang berbeda.
Menahan diri itulah yang membuat gradasi terasa kekinian
Gradasi yang terbaca kontemporer hampir selalu halus: dua nada dari rona yang sama, terpisah beberapa langkah kecerahan, diterapkan pada bidang yang luas. Yang terbaca kuno adalah yang berkontras tinggi, banyak rona, dan diterapkan pada elemen kecil. Kalau Anda punya palet, gradasi paling aman adalah antara dua langkah bertetangga dari skala warna yang sama — ia menambah kedalaman tanpa memamerkan diri. Patokan yang bertahan saat berhadapan dengan antarmuka sungguhan: kalau pengunjung akan menyebut halaman Anda sebagai “yang ada gradasinya itu”, gradasinya sedang berbuat terlalu banyak.
Performa dan di mana mendeklarasikannya
Gradasi CSS digambar browser alih-alih diunduh, jadi tidak memakan permintaan jaringan dan tetap tajam pada ukuran berapa pun — keunggulan nyata dibanding gambar latar, dan alasan untuk memilihnya pada latar datar yang luas. Ada dua peringatan. Menganimasikan gradasi dengan mengubah titik-titik warnanya memaksa penggambaran ulang di tiap bingkai dan itu mahal; animasikan `opacity` atau `transform` pada lapisan yang memuat gradasi tersebut. Dan pada elemen yang sangat besar, gradasi bertitik banyak lebih mahal digambar daripada yang bertitik dua, dan itu terasa pada ponsel kelas bawah tempat waktu penggambaran menjadi hambatannya.
Kesalahan umum yang sebaiknya dihindari
- Menilai gradasi dari dua warna ujungnya. Ujungnya hampir selalu tampak bagus; kegagalannya ada di tengah, tempat interpolasi sRGB menguras saturasi. Lihat pratinjaunya, bukan contoh warnanya.
- Menerima titik tengah abu-abu di antara rona yang berjauhan. Tambahkan titik antara pada rona yang Anda ingin dilalui transisinya — satu titik menyelamatkan sebagian besar gradasi yang pudar.
- Menaruh teks di atas gradasi lalu menguji satu ujung saja. Syarat kontras berlaku di tiap titik yang dilalui teks; periksa ujung terang dan ujung gelapnya, dan tambahkan panel solid kalau salah satunya gagal.
- Memakai gradasi radial sebagai latar satu halaman penuh. Ia terbaca sebagai vinyet, bukan bidang; radial untuk pendar di belakang elemen utama, linear untuk latar.
- Menganimasikan titik-titik warnanya. Itu menggambar ulang gradasinya tiap bingkai — animasikan opasitas atau transformasi pada sebuah lapisan, yang bisa dikomposit browser dengan murah.
Perbandingan
| KeroTools | Developer tools browser | Perangkat lunak desain | |
|---|---|---|---|
| Pratinjau langsung saat menyunting | Ada | Ada, di halaman sungguhan | Ada |
| Keluaran CSS siap salin | Ada | Ada | Sering hanya perkiraan |
| Bisa dipakai sebelum dibangun | Ya | Tidak — butuh halaman yang sudah dirender | Ya |
| Nilai dikirim ke server | Tidak pernah | Tidak | Tidak |
| Akun atau lisensi | Tidak keduanya | Tidak keduanya | Perlu lisensi |
| Biaya | Gratis | Gratis | Berbayar |
Fitur
Gradasi linear
Sudut berapa pun dalam derajat, atau arah berbasis kata kunci yang diterima CSS.
Gradasi radial
Berbentuk lingkaran atau elips, dengan kendali atas letak titik pusatnya.
Beberapa titik warna
Sisipkan warna antara dan tempatkan posisinya dengan presisi di sepanjang sumbu.
Pratinjau langsung
Gradasinya tergambar sambil Anda menyunting, jadi bagian tengah yang keruh terlihat sebelum tayang.
Keluaran CSS yang sah
Deklarasi `background` yang utuh, bukan potongan yang harus Anda rakit sendiri.
Masukan warna HEX
Tempel kodenya langsung dari dokumen merek atau sebuah palet.
Tanpa instalasi
Tidak ada yang perlu diunduh atau dipasang — jalan langsung di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan berkas dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Pengembang front-end
Mendapat deklarasi gradasi yang sah tanpa menulis sudut dan posisi titik warna secara manual.
Desainer
Memeriksa bagaimana transisi dua warna benar-benar tergambar sebelum masuk ke mockup.
Siapa pun yang menyesuaikan template
Membuat latar hero atau tombol dari dua warna merek yang sudah mereka punya.
Yang sedang belajar
Melihat apa yang terjadi saat sudut diubah atau titik ditambah, alih-alih menebak sintaksisnya.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — tidak ada yang diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.