Generator Gradien CSS

Gradien linier mentransisikan warna di sepanjang garis lurus (horizontal, vertikal, atau diagonal), menciptakan aliran terarah dari satu warna ke warna lainnya. Gradien radial memancar dari titik pusat ke arah luar dalam pola melingkar atau elips. Gunakan gradien linier untuk penekanan arah dan antarmuka modern, dan gradien radial untuk efek sorotan, tombol, atau ketertarikan visual organik.

Anda dapat mengatur sudut gradien dalam derajat (0 derajat hingga 360 derajat) atau menggunakan kata kunci seperti 'ke kanan', 'ke bawah', 'ke kanan atas', dll. 0 derajat menunjuk ke atas, 90 derajat menunjuk ke kanan, 180 derajat menunjuk ke bawah, dan 270 derajat menunjuk ke kiri. Sudut menentukan sumbu transisi warna, sehingga Anda memiliki kendali penuh atas arah gradien.

Ya! Gradien CSS mendukung pemberhentian warna yang tidak terbatas. Anda dapat menambahkan beberapa warna untuk menciptakan gradien multi-warna yang rumit. Tiap warna bisa memiliki persentase posisi opsional (0% hingga 100%) untuk mengontrol di mana warna itu muncul dalam gradien. Ini sempurna untuk menciptakan efek pelangi, gradien matahari terbenam, atau transisi warna yang canggih.

Gunakan dua warna yang memiliki rona, saturasi, atau kecerahan yang hampir sama. Contohnya, transisi dari warna biru sedang ke warna biru yang sedikit lebih terang atau lebih gelap. Jaga agar kontras tetap rendah dan pertimbangkan untuk menggunakan nilai HSL di mana Anda hanya menyesuaikan kecerahan sebesar 10-20%. Gradien yang halus menambah kedalaman dan ketertarikan visual tanpa membuat konten yang berlebihan.

Gradien CSS modern (menggunakan gradien linier dan gradien radial) didukung di semua peramban saat ini tanpa awalan vendor. Namun, jika Anda perlu mendukung peramban yang sangat lama (IE9 dan sebelumnya), Anda mungkin memerlukan awalan vendor (-webkit-, -moz-, -o-) atau warna solid fallback. Untuk pengembangan web modern, sintaks gradien CSS standar dapat digunakan di mana saja.

Posisikan pemberhentian warna Anda secara merata dan hindari lompatan warna yang drastis. Gunakan pemberhentian warna menengah di antara warna-warna ekstrem untuk menciptakan transisi yang lebih halus. Untuk gradien radial, bereksperimenlah dengan bentuk (lingkaran vs elips) dan posisinya. Pertimbangkan untuk menggunakan warna dengan nilai saturasi dan kecerahan yang serupa, atau bekerja dalam ruang HSL di mana Anda bisa menciptakan transisi rona warna yang mulus.

Gradien radial bisa berbentuk lingkaran (sama ke segala arah) atau elips (direntangkan agar sesuai dengan wadah). Lingkaran bekerja dengan baik untuk efek sorotan dan desain di tengah, sementara elips lebih baik untuk latar belakang yang perlu mencakup area persegi panjang secara merata. Parameter bentuk memungkinkan Anda mengontrol perilaku ini.

Ya! Gunakan sudut antara 0 derajat dan 360 derajat untuk gradien diagonal. 45deg menciptakan diagonal yang sempurna dari kiri bawah ke kanan atas, 135deg dari kanan bawah ke kiri atas. Gradien diagonal menambah daya tarik visual yang dinamis dan dapat memandu mata melalui desain Anda.

Gunakan format warna RGBA atau HSLA dengan saluran alfa untuk menciptakan gradien yang memudar menjadi transparan. Ini sempurna untuk efek hamparan, mask gambar, atau menciptakan kedalaman. Contohnya, gradien dari rgba (0,0,0,1) ke rgba (0,0,0,0) menciptakan pudar menjadi hitam transparan.

Color stops (Hentian warna) mengontrol di mana setiap warna muncul dalam gradien (0% hingga 100%). Jarak yang rata menciptakan transisi yang mulus, sementara pengelompokan stop yang menyatu menciptakan perubahan warna yang tajam. Contohnya, menempatkan dua warna pada 50% menciptakan garis yang tegas, sementara memberi jarak pada 40% dan 60% menciptakan perpaduan yang mulus.