Pembuat Gradasi

Tentang Pembuat Gradasi

Selamat datang di Pembuat Gradasi, alat desain kelas profesional untuk membuat gradasi CSS yang indah. Baik Anda memerlukan gradasi latar belakang yang halus untuk situs web Anda, efek tombol yang cerah, atau bagian hero yang memukau, alat ini memberi Anda kontrol kreatif penuh dengan pratinjau waktu nyata dan berbagai format ekspor.

Fitur Utama

Penghenti Warna Interaktif

Klik di mana saja pada batang gradasi untuk menambahkan penghenti warna baru. Seret penghenti untuk memposisikannya kembali, menciptakan transisi halus atau batas warna yang tajam. Hapus penghenti tengah dengan mengklik tombol hapus yang muncul saat kursor diarahkan.

Kontrol Sudut yang Presisi

Gunakan dial sudut yang intuitif untuk menetapkan arah gradasi yang tepat, atau pilih dari sudut prasetel (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°) untuk arah yang umum. Dial visual memungkinkan Anda menyempurnakan sudut untuk hasil yang sempurna piksel.

Preset Gradasi Pilihan

Mulailah dengan 16 preset gradasi yang dirancang secara profesional termasuk pilihan populer seperti Purple Haze, Ocean Blue, Fresh Mint, dan Neon. Setiap preset berfungsi sebagai titik awal yang dapat Anda sesuaikan lebih lanjut.

Beberapa Format Ekspor

• CSS - Properti latar belakang CSS standar yang siap ditempel
• Tailwind CSS - Kelas utilitas atau nilai arbitrer untuk proyek Tailwind
• SVG - Gradasi yang tidak bergantung pada resolusi untuk ikon dan grafik

Cara Menggunakan Alat Ini

1. Pilih tipe gradasi: Pilih Linear untuk gradasi searah atau Radial untuk gradasi melingkar.
2. Pilih warna Anda: Gunakan pemilih warna atau masukkan nilai hex secara langsung untuk warna awal dan akhir Anda.
3. Atur sudut: Untuk gradasi linear, seret dial sudut atau klik sudut prasetel.
4. Tambahkan penghenti warna: Klik pada batang gradasi untuk menambahkan warna perantara untuk gradasi yang kompleks.
5. Pratinjau: Perhatikan pembaruan gradasi Anda secara real-time. Aktifkan hamparan bentuk untuk melihat tampilannya pada elemen UI.
6. Ekspor: Salin kode CSS, Tailwind, atau SVG dengan satu klik.

Memahami Gradasi CSS

Gradasi Linear

Gradasi linear mengubah warna di sepanjang garis lurus. Sudut menentukan arahnya:

Gradasi Radial

Gradasi radial mengubah warna ke arah luar dari titik pusat dalam pola melingkar atau elips:

Penghenti Warna

Penghenti warna menentukan di mana setiap warna muncul dalam gradasi. Mereka terdiri dari nilai warna dan persentase posisi opsional:

• #ff0000 0% - Merah di awal
• #00ff00 50% - Hijau di tengah
• #0000ff 100% - Biru di akhir

Praktik Terbaik untuk Desain Gradasi

Harmoni Warna

• Warna analog: Warna yang bersebelahan pada roda warna menciptakan gradasi yang halus dan alami
• Warna komplementer: Warna yang berlawanan menciptakan gradasi yang cerah dan kontras tinggi
• Monokromatik: Nuansa berbeda dari satu warna menciptakan gradasi yang halus dan elegan

Pertimbangan Aksesibilitas

• Pastikan kontras yang cukup antara latar belakang gradasi dan teks
• Hindari menempatkan konten penting pada transisi gradasi yang kompleks
• Uji gradasi dengan alat aksesibilitas untuk memeriksa rasio kontras warna

Tips Performa

• Gradasi CSS lebih efisien daripada file gambar
• Gradasi merender pada resolusi asli di semua perangkat
• Gunakan gradasi sebagai pengganti gambar latar belakang yang besar jika memungkinkan

Pola Gradasi Umum

Gradasi Tombol

Tombol biasanya menggunakan gradasi halus yang mencerah ke arah atas, menciptakan efek 3D "timbul". Gunakan sudut sekitar 180° (atas ke bawah) dengan warna yang lebih terang pada 0%.

Gradasi Latar Belakang

Latar belakang halaman penuh sering kali menggunakan gradasi diagonal (135° atau 45°) dengan warna-warna lembut dan redup yang tidak mengganggu konten.

Hamparan Kartu

Kartu gambar sering kali menggunakan gradasi yang memudar dari transparan ke gelap di bagian bawah, membuat teks putih mudah dibaca di atas foto.

Pertanyaan yang Sering Diajukan

Apa itu gradasi CSS?

Gradasi CSS adalah transisi halus antara dua warna atau lebih yang dapat digunakan sebagai gambar latar belakang. CSS mendukung gradasi linear, radial, dan konik. Gradasi tidak bergantung pada resolusi dan tampil tajam di semua ukuran layar.

Apa perbedaan antara gradasi linear dan radial?

Gradasi linear bertransisi sepanjang garis lurus pada sudut tertentu. Gradasi radial bertransisi ke luar dari titik pusat dalam bentuk melingkar atau elips. Linear ideal untuk latar belakang, sedangkan radial menciptakan efek sorotan.

Bagaimana cara menggunakan penghenti warna dalam gradasi?

Penghenti warna menentukan posisi setiap warna (0% hingga 100%). Menyesuaikan posisi ini memungkinkan Anda mengontrol di mana satu warna mulai memudar ke warna berikutnya.

Bisakah saya menggunakan gradasi di Tailwind CSS?

Ya, Tailwind menyediakan kelas bawaan seperti bg-gradient-to-r atau mendukung gradasi kustom menggunakan kurung siku untuk nilai arbitrer.

Bagaimana cara kerja sudut gradasi?

Sudut dimulai dari 0° (ke atas) dan bertambah searah jarum jam. 90° adalah ke kanan, 180° ke bawah, dan 270° ke kiri.

Apakah gradasi CSS lebih baik daripada gambar gradasi?

Ya, gradasi CSS lebih cepat dimuat, menggunakan lebih sedikit data, dan selalu tajam di layar apa pun karena dihasilkan secara matematis oleh browser.

Sumber Daya Tambahan

• Dokumentasi Web MDN: Gradasi CSS
• Modul Gambar CSS W3C Tingkat 3
• CSS Gradient - Alat Gradasi Tambahan

Alat terkait lainnya:

Alat Warna:

• Konverter CMYK ke Hexadecimal
• Pemeriksa Kontras Warna
• Pembalik Warna
• Generator Skema Warna
• Pembuat Gradasi
• Konverter Hex ke CMYK Unggulan
• Konverter Hex ke RGB
• Pemilih Warna Gambar
• Generator Palet
• Generator Warna Acak
• Konverter RGB ke Hex
• Generator Palet Warna Acak Baru