Kategori alat
Kategori Lihat semua alat

CSS Gradient Generator

Desain gradien CSS linear dan radial secara visual, sesuaikan warna dan sudut, dan salin CSS-nya.

Cara menggunakan

  1. Pilih tipe gradien — linear atau radial — dan pilih warna Anda.
  2. Sesuaikan sudut dengan slider (hanya linear) dan lihat pratinjau diperbarui secara real time.
  3. Salin CSS dengan satu klik dan tempelkan ke stylesheet Anda.

Tentang alat ini

Gradien CSS adalah pola latar belakang web modern. Gradien linear memadukan warna sepanjang garis pada sudut yang dipilih; gradien radial memadukan warna dari titik pusat ke luar. Keduanya dideklarasikan dalam satu properti CSS, dirender pada resolusi apa pun tanpa file gambar, dan tidak memakan bandwidth jaringan. Generator ini membangun deklarasinya secara visual.

Pilih dua atau tiga warna, atur sudut untuk linear atau biarkan untuk radial, dan pratinjau menampilkan hasilnya. Baris CSS di bawahnya siap disalin — tempelkan sebagai properti background dan berfungsi di setiap browser yang dirilis dalam dekade terakhir. Tiga warna menghasilkan gradien lebih kaya dari dua, dan warna tengah adalah yang menentukan desainnya.

Alat ini berjalan di browser Anda. Tidak ada panggilan server, tidak ada gambar yang dihasilkan, tidak ada file untuk diunduh. Apa yang Anda lihat di pratinjau adalah apa yang dirender browser dari CSS, yang berarti hasilnya di produksi akan identik.

Pertanyaan yang sering diajukan

Does it work in all browsers?

Ya. Gradien CSS didukung di setiap browser modern. Kode yang dihasilkan menggunakan sintaks standar tanpa prefix vendor.

Bisakah saya menambahkan lebih dari tiga warna?

Alat ini menawarkan tiga color stop. Untuk gradien yang lebih kompleks, mulai dengan kode tiga stop dan tambahkan stop secara manual di CSS Anda.

What is the angle?

Arah gradien dalam derajat. 0 ke atas, 90 ke kanan, 180 ke bawah. Slider mencakup 0 hingga 360.

Bisakah digunakan untuk gradien teks?

Ya. Terapkan gradien sebagai background-image, atur background-clip: text dan color: transparent. CSS yang dihasilkan alat ini adalah bagian background-image.

Is the gradient an image?

Tidak. Ini adalah deklarasi CSS. Browser merendernya secara matematis, sehingga tajam di ukuran apa pun dan tidak menambah berat halaman.

css gradiente linear radial cores gerador background design web frontend visual copiar

Alat terkait

CSS Box Shadow Generator Desain bayangan kotak secara visual — sesuaikan offset, blur, spread, warna dan opasitas, dan salin CSS-nya. Konverter Warna Konversi sebuah warna antara HEX, RGB, HSL, HSV dan CMYK dengan sinkronisasi dua arah langsung, di browser Anda. Generator Palet Warna Pilih warna dasar dan hasilkan palet harmonis — komplementer, triadik, analog, split-komplementer, dan monokromatik. Pemeriksa Kontras WCAG Periksa rasio kontras antara dua warna dan lihat apakah lolos WCAG AA dan AAA, langsung di browser Anda. Pencampur Warna Campur dua warna dengan penggeser proporsi dan baca seluruh skala 11 langkah di antaranya, di browser Anda. Generator UUID v4 Hasilkan satu atau banyak pengenal UUID v4 acak dengan keacakan kriptografis.

Tautan panjang? Perpendek secara gratis

Vai.la mengubah URL apa pun menjadi tautan pendek dengan statistik klik, QR Code, dan biolink Anda sendiri.

Perpendek tautan Buat akun gratis

Vai.la tidak bertanggung jawab atas cara alat-alat ini digunakan maupun atas keputusan yang diambil berdasarkan hasilnya.