Generator CSS Gradient
Rancang gradien CSS linear, radial, dan conic dengan titik warna yang bisa diseret, sudut, mode berulang, dan interpolasi OKLCH. Pratinjau langsung, salin kodenya.
Preset
Pengaturan gradien
Titik warna
Klik bilah untuk menambah titik warna, seret pegangan untuk memindahkannya. Warna bisa berupa hex, rgb(), hsl(), atau oklch().
Pratinjau
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
Alat Terkait
Lihat SemuaApa itu Generator CSS Gradient?
Editor gradien CSS lengkap yang mendukung linear-gradient, radial-gradient, dan conic-gradient, varian berulangnya, serta interpolasi warna modern (in oklab / in oklch). Titik warna dapat diseret di bilah atau diketik persis, dan warna menerima hex, rgb(), hsl(), atau oklch().
Cara menggunakan Generator CSS Gradient
- Pilih preset atau Jenis: Linear, Radial, atau Kerucut (conic).
- Atur Sudut (linear), Sudut awal (conic), atau Bentuk, Ukuran, dan posisi pusat (radial/conic).
- Edit Titik warna: klik bilah untuk menambah titik, seret pegangan untuk memindahkannya, atau ketik warna dan posisi untuk setiap titik.
- Opsional, centang Gradien berulang dan pilih Ruang warna interpolasi (OKLab atau OKLCH).
- Salin kode CSS-nya.
Contoh
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
Kapan menggunakan Generator CSS Gradient
Gunakan untuk latar belakang, tombol, bagian hero, serta garis-garis atau roda warna dari gradien. Untuk latar "mesh" multi-titik yang lembut, gunakan Generator Mesh Gradient; untuk efek mirip foto pada gambar, gunakan filter CSS.
Cara kerja Generator CSS Gradient
Titik warna diurutkan berdasarkan posisi dan ditulis sebagai color position%. Gradien linear memakai sudut dalam derajat, gradien radial shape [size] at x% y%, gradien conic from angle at x% y%. Mengklik bilah menyisipkan titik yang warnanya diinterpolasi dari tetangganya. Jika ruang interpolasi dipilih, alat ini menghasilkan dua deklarasi: fallback sRGB biasa lebih dulu, lalu gradien yang sama dengan in oklch (atau in oklab), sehingga browser lama tetap punya gradien yang berfungsi dan browser modern memakai campuran perseptual yang lebih halus.
Kasus Penggunaan Umum
- Latar bagian hero dan section
- Tombol dan lencana bergradien
- Roda warna dan visual mirip diagram lingkaran dengan gradien conic
- Latar bergaris dengan gradien berulang
- Gradien OKLCH halus yang menghindari bagian tengah abu-abu pada campuran sRGB
Pertanyaan Umum
Mengapa ada dua baris background dengan interpolasi OKLCH?
Browser yang tidak memahami in oklch membuang deklarasi itu sepenuhnya. Baris pertama adalah gradien sRGB biasa yang bisa mereka pakai; browser yang mendukung menerapkan baris kedua.
Apa yang diubah oleh interpolasi OKLCH?
Warna dicampur dalam ruang yang seragam secara perseptual, sehingga gradien antara warna-warna jenuh tetap hidup alih-alih melewati bagian tengah yang abu-abu kusam atau keruh.
Bisakah saya memakai transparansi?
Bisa. Gunakan rgba(), hsl(), atau oklch() dengan nilai alpha (misalnya rgba(0, 0, 0, 0.5)) sebagai warna titik.
Bagaimana cara membuat garis-garis tegas?
Taruh dua titik pada posisi yang sama (mis. kuning 5% dan hitam 5%) dan aktifkan Gradien berulang, seperti pada preset Garis-garis.