Generator Gradien CSS
Buat gradien CSS sambil melihat pratinjau dan kode yang ikut berubah. Atur titik warna, tipe, sudut, dan posisi, lalu cek tampilannya sebagai latar, tombol, teks, atau border sebelum disalin.
Pengaturan gradien
Pilih tipe dulu, lalu atur arah dan titik warna.
Pratinjau dan kode CSS
Bandingkan penggunaan nyata dengan kode yang siap disalin.
Teks gradien
class="my-gradient"di dalam alur kerja.
- Layar terlihatArea input dan hasil dibuat mudah ditemukan.
- Hasil duluOutput utama ditaruh sebelum penjelasan panjang.
- Lebih sedikit syaratBisa dipakai tanpa daftar atau data tambahan.
Cara Membuat Gradien CSS untuk Background, Teks, Tombol, dan Border
Generator gradien CSS seharusnya tidak hanya memilih dua warna yang terlihat bagus. Yang penting adalah menentukan tempat pemakaian, tipe fungsi CSS yang tepat, dan apakah hasilnya tetap terbaca pada background, tombol, teks, border, serta mode gelap.
Di halaman ini kamu bisa membuat gradien linear, radial, dan conic, mengatur color stop, melihat pratinjau UI, lalu menyalin kode CSS yang sesuai.
Apa yang dibuat oleh generator gradien CSS ini?
Alat ini menghasilkan kode CSS tanpa file gambar. Warna yang sama bisa dilihat sebagai background, tombol, teks dengan clip, atau border.
Gunakan saat kamu perlu melihat hasil visual sebelum menempelkan kode ke stylesheet.
- Membuat linear, radial, dan conic gradient.
- Mengubah warna dan posisi color stop.
- Menyediakan CSS variable dan prefix opsional.
- Membandingkan background, tombol, teks, dan border.
Cara membuat gradien CSS
Mulai dari tempat pemakaian. Background lebar, tombol kecil, dan teks gradien punya kebutuhan yang berbeda.
- Pilih tipe gradien.
- Atur sudut, posisi, atau start value sesuai tipe.
- Tambah atau geser color stop.
- Cek tab pratinjau.
- Salin CSS untuk penggunaan akhir.
Perbedaan linear, radial, dan conic
Linear mengalir ke satu arah dan paling aman untuk background. Radial menyebar dari titik pusat. Conic berputar mengelilingi pusat dan cocok untuk ring, dial, atau color wheel.
Radial tidak memakai sudut linear; ubah bentuk dan posisi pusatnya.
- Linear: kartu, banner, panel
- Radial: glow, spotlight, aksen lingkaran
- Conic: roda warna, dial, ring
Color stop selalu bersama posisi
Color stop terdiri dari warna dan persentase. Memindahkan posisi mengubah area transisi walau warnanya sama.
Untuk UI biasa, 2 sampai 4 stop biasanya lebih mudah dibaca dan dirawat.
- Dua stop: blend sederhana.
- Tiga stop: warna tengah terkontrol.
- Empat atau lebih: dekorasi yang sengaja menonjol.
Teks dan border gradien butuh CSS berbeda
Background cukup dengan `background`. Teks gradien membutuhkan background clipping dan warna teks transparan. Border gradien biasanya perlu layered background atau pola border-box.
Karena itu setiap tab pratinjau perlu dicek sebelum kode disalin.
- Teks: cek clipping dan keterbacaan.
- Border: pastikan garis benar-benar terlihat.
- Tombol: cek label dan hover.
Kapan memakai CSS variable dan prefix
CSS variable berguna jika warna yang sama dipakai di beberapa komponen. Untuk dekorasi sekali pakai, aturan langsung lebih sederhana.
Prefix dipakai untuk meninjau kompatibilitas. Proyek modern biasanya menjadikan sintaks standar sebagai acuan.
- Sekali pakai: salin CSS langsung.
- Brand gradient berulang: pakai variable.
- Cek kompatibilitas: lihat prefix.
Cek kontras sebelum menyalin
Gradien bisa memiliki bagian terang dan gelap dalam satu elemen. Teks bisa terbaca di satu sisi tetapi hilang di sisi lain.
Cek warna teks asli, background, hover, dan mode gelap sebelum dipakai.
- Kontras lebih penting daripada efek dekoratif.
- Label tombol harus terbaca di semua state.
- Border butuh tebal dan kontras yang cukup.
Generator, formatter, dan minifier berbeda
Generator ini membuat nilai gradien baru. Formatter merapikan CSS yang sudah ada. Minifier mengecilkan ukuran file untuk produksi.
Buat gradiennya dulu, lalu rapikan atau minify stylesheet setelah kodenya masuk proyek.
- Membuat gradien: alat ini
- Merapikan CSS: CSS formatter
- Mengecilkan file: CSS minifier
Masalah umum saat memakai gradien
Jika pratinjau tidak berubah, cek apakah kontrolnya berlaku untuk tipe yang aktif. Jika kode tidak tampil, mungkin ada aturan CSS lain yang menimpa.
- Sudut tidak mengubah radial.
- Teks butuh background-clip.
- Border butuh pola border-box.
- Nama class sebaiknya diganti sebelum produksi.
Pertanyaan umum
Bagaimana cara membuat gradien CSS?
Pilih tipe gradien, atur color stop, cek pratinjau sesuai penggunaan, lalu salin potongan CSS yang dihasilkan.
Sebaiknya memakai linear, radial, atau conic?
Linear cocok untuk sebagian besar background, radial untuk glow atau aksen lingkaran, dan conic untuk ring, dial, atau roda warna.
Mengapa sudut tidak mengubah gradien radial?
Radial dikendalikan oleh bentuk dan posisi pusat, bukan arah linear. Gunakan linear atau conic jika butuh arah atau sudut awal.
Bagaimana membuat border gradien di CSS?
Gunakan border transparan dengan layered background atau pola border-box agar gradien muncul di tepi elemen.
Bolehkah CSS langsung ditempel ke proyek?
Boleh untuk uji coba, tetapi ganti nama class dan cek kontras, hover, mode gelap, serta aturan CSS lain sebelum dipublikasikan.