Generator CSS Gradient
Desain gradient secara visual, lalu salin kode CSS-nya persis dalam sekali klik.
Generator CSS gradient ini memungkinkan Anda membangun gradient dengan bermain-main, bukan menyunting sintaks secara manual. Pilih dua warna atau lebih, geser posisinya di sepanjang bar, atur sudut atau ubah ke radial, dan saksikan pratinjau ukuran penuh diperbarui langsung. Saat tampilannya pas, salin deklarasi background jadi langsung ke stylesheet Anda.
Sintaks gradient mudah dibuat hampir benar: posisi stop, kata kunci sudut, dan format warna semuanya punya keunikan, dan satu salah ketik cukup membuatnya tak merender apa pun. Menghasilkan kode dari pratinjau yang berfungsi menghapus tebak-tebakan, baik Anda butuh latar hero dua warna yang halus, isian tombol yang mencolok, maupun overlay di atas foto.
Generator berjalan sepenuhnya di browser Anda dan gratis tanpa akun. Keluarannya adalah CSS linear-gradient() atau radial-gradient() standar yang bekerja di setiap browser modern tanpa perlu prefiks.
Cara membuat CSS gradient
- Pilih jenis gradient: linear atau radial.
- Klik tiap color stop untuk menetapkan warnanya, lewat picker atau kode hex.
- Geser stop di sepanjang bar untuk mengatur di mana tiap warna mulai dan membaur.
- Atur sudut untuk gradient linear, atau bentuk dan posisi untuk yang radial.
- Tambahkan stop ekstra jika ingin lebih dari dua warna.
- Klik Copy CSS lalu tempel kodenya ke stylesheet Anda.
Apa yang dilakukan generator gradient ini
Alat ini memungkinkan Anda membangun gradient secara visual, memilih color stop, menggesernya di sepanjang bar, dan mengatur sudut atau bentuk radial, lalu menyerahkan CSS jadi untuk Anda salin. Keluarannya adalah deklarasi background standar yang Anda tempel ke stylesheet; tidak ada file gambar dan tidak ada langkah ekspor, hanya kode.
Karena Anda membentuk pratinjau langsung alih-alih menulis sintaks dengan tangan, Anda melihat persis apa yang akan dirender sebelum sampai ke halaman Anda. Itu menghapus tebak-tebakan dari sebuah bahasa yang satu nilai salah tempatnya diam-diam tidak menghasilkan apa pun.
Cara kerja sintaks CSS gradient
Gradient linear ditulis sebagai linear-gradient(direction, color-stop, color-stop, ...). Direction adalah sudut seperti 90deg atau kata kunci seperti to right, dan tiap stop adalah warna dengan posisi opsional seperti #ff6600 20%. Gradient radial memakai radial-gradient() dan mendeskripsikan bentuk serta posisi alih-alih sudut, membaur keluar dari titik pusat.
Posisi stop adalah tempat keunikan bersembunyi. Kosongkan dan browser menata stop secara merata; beri dua stop posisi yang sama dan Anda mendapat tepi tajam alih-alih baur, dan begitulah cara membuat garis-garis. Generator menuliskan sintaks yang valid untuk Anda, jadi Anda bisa belajar formatnya sambil menyaksikan kode berubah saat menggeser.
Tips untuk gradient yang terlihat profesional
Tuas kualitas terbesar adalah memilih warna yang bertetangga: biru ke ungu, oranye ke merah muda. Warna dari sisi berlawanan roda warna melewati abu-abu keruh di tengah. Jika Anda harus menjembatani warna yang jauh, tambahkan stop tengah yang memilih warna peralihan secara sengaja.
Kehalusan juga menjual. Gradient latar antara dua gradasi warna yang sama terbaca sebagai kedalaman, bukan hiasan. Dan untuk teks di atas foto, gradient ke hitam transparan adalah trik standar: linear-gradient(rgba(0,0,0,.6), transparent).
Di mana gradient membuktikan nilainya
Tugas umumnya adalah latar hero dan seksi, isian tombol dan kartu, serta overlay foto yang menjaga teks putih tetap terbaca di atas gambar yang ramai. Latar dua warna yang lembut menambah kedalaman pada tata letak yang sebelumnya datar, sementara isian multi-stop yang mencolok bisa membuat tombol call-to-action melompat dari halaman.
Gradient juga bisa menggantikan gambar. Gradient latar yang dipilih dengan baik memuat seketika, menyesuaikan ke layar mana pun tanpa bobot file, dan tidak pernah pecah, itulah sebabnya ia sering mengalahkan JPEG untuk isian dekoratif dan kondisi kosong.
Memakai gradient pada teks
Teks gradient adalah perlakuan judul yang populer. Jadikan gradient sebagai background elemen, lalu tambahkan background-clip: text dengan warna teks transparan agar gradient menembus bentuk huruf. Generator menghasilkan bagian gradient-nya; Anda membungkus dua baris tambahan itu di sekelilingnya.
Perhatikan kontras: gradient yang menukik ke warna terang bisa membuat sebagian judul sulit dibaca di atas latar pucat. Uji titik paling terang gradient terhadap permukaan di belakangnya, dan utamakan gradient yang tetap berada dalam rentang terbaca untuk apa pun yang membawa konten sungguhan.
Catatan aksesibilitas dan performa
Saat gradient berada di belakang teks, kontras harus terjaga di sepanjang seluruh gradient, bukan hanya titik tengahnya. Periksa teks terhadap stop paling terang dan paling gelap yang ditumpanginya, karena pasangan yang lolos secara rata-rata masih bisa gagal di tempat gradient paling pucat. Overlay gelap semi-transparan di atas foto adalah cara andal menjamin keterbacaan.
Soal performa, CSS gradient digambar oleh browser dan hampir tidak berbiaya untuk diunduh, tidak seperti gambar latar. Ia juga independen resolusi, jadi satu deklarasi tampak tajam dari ponsel hingga layar 4K tanpa Anda perlu mengirim banyak aset.
Alat terkait
Gradient hanya sebaik warna yang mengisinya, jadi color picker adalah pendamping alami untuk memilih stop dan membaca nilai HEX, RGB, dan HSL-nya sebelum Anda memasukkannya.
Jika sebuah desain memberi Anda warna dalam notasi yang salah, konverter HEX ke RGB dan RGB ke HEX menerjemahkannya dengan matematika yang persis. Semua ini berjalan sepenuhnya di browser Anda, dan generator gradient sendiri menghasilkan CSS biasa yang tinggal Anda salin.
Pertanyaan yang sering diajukan
Apakah generator gradient ini gratis?
Ya. Gratis tanpa daftar, tanpa watermark, dan tanpa batas berapa banyak gradient yang Anda buat atau salin.
Browser mana yang mendukung CSS yang dihasilkan?
Semua browser modern, termasuk Chrome, Firefox, Safari, dan Edge, mendukung linear-gradient() dan radial-gradient() tanpa prefiks vendor. Hanya browser sangat lama (IE9 ke bawah) yang tidak.
Bisakah membuat gradient dengan lebih dari dua warna?
Ya. Tambahkan sebanyak color stop yang Anda mau dan posisikan masing-masing di sepanjang bar. Gradient multi-stop adalah cara mendapat latar bergaya senja dan aurora.
Bisakah gradient dipakai pada teks?
Ya, dengan trik kecil: jadikan gradient sebagai background teks, lalu tambahkan background-clip: text dan warna teks transparan. Generator memberi bagian gradient-nya; tambahkan dua baris itu di sekelilingnya.
Apakah ia mengekspor file gambar?
Tidak, ia menghasilkan kode CSS, yang menyesuaikan ke ukuran mana pun tanpa bobot file. Jika Anda butuh gradient sebagai PNG untuk konteks non-web, ambil tangkapan layar pratinjau atau render di editor gambar.
Apakah bekerja di ponsel?
Ya, kontrolnya ramah sentuhan. Membangun gradient multi-stop yang presisi lebih nyaman di layar besar, tetapi semuanya berfungsi di ponsel.