Lompat ke konten
Aback Tools Logo

Generator Gradien Warna

Buat gradien CSS linear, radial, dan conic secara visual - instan dan gratis. Tambahkan hingga 10 titik warna, atur posisi yang tepat, pilih arah dan sudut, dan dapatkan output CSS siap produksi dengan satu klik. Enam preset disertakan untuk memulai. Sepenuhnya privat, tanpa perlu daftar.

Color Gradient Generator
Build CSS gradients visually. Add color stops, choose a gradient type and direction, and get the CSS output instantly. Copy the CSS or use a preset to get started quickly.

Presets

Gradient Type

Direction

Color Stops (2)

0%
100%

Click the colour swatch to open the colour picker. Drag the slider to adjust position.

background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);

Mengapa memakai generator gradien warna kami?

  • Pratinjau langsung & CSS instan: generator gradien warna memperbarui pratinjau langsung dan output CSS pada setiap perubahan - tanpa perlu menekan tombol. Lihat gradien Anda persis seperti yang akan tampil di browser dan salin CSS dengan satu klik.
  • Tiga jenis gradien & kontrol penuh: buat gradien linear, radial, dan conic dengan kontrol penuh atas arah, sudut, bentuk, ukuran, dan posisi pusat. Tambahkan hingga 10 titik warna, atur posisi yang tepat, dan aktifkan mode berulang untuk pola berulang.
  • 100% privat - tanpa unggah: seluruh pembuatan gradien berlangsung secara lokal di browser Anda. Pilihan warna Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server - aman untuk proyek klien dan design system milik sendiri.
  • Gratis & tanpa batas: hasilkan gradien tanpa batas tanpa daftar, tanpa langganan, dan tanpa batas penggunaan. Generator gradien warna sepenuhnya gratis selamanya dan tanpa iklan yang menutupi antarmuka.

Kasus penggunaan umum generator gradien warna

  • Latar situs web & section hero: desainer web memakai generator gradien warna untuk membuat latar section hero yang mencolok, gradien halaman, dan pemisah section. Salin CSS langsung ke stylesheet Anda dengan satu klik.
  • Pengembangan CSS & Tailwind: pengembang frontend memakai generator ini untuk membuat dan menguji CSS gradien sebelum menambahkannya ke basis kode. Hasilnya adalah CSS siap produksi yang berfungsi di semua browser modern.
  • Token design system: tim design system memakai generator ini untuk mendefinisikan token gradien untuk latar, kartu, dan komponen UI. Builder visualnya memudahkan menyelaraskan gradien dengan warna merek.
  • Grafis media sosial & pemasaran: pemasar dan kreator konten memakai generator ini untuk membuat latar gradien untuk unggahan media sosial, banner, dan header email. Pustaka preset memberi titik awal instan.
  • Gaya tombol & kartu: pengembang UI memakai generator ini untuk membuat isian gradien untuk tombol, kartu, badge, dan progress bar. Gradien radial dan conic menambah kedalaman serta daya tarik visual pada komponen UI.
  • Desain landing page & CTA: pengoptimal konversi memakai generator ini untuk membuat CTA dan latar section bergradien berkontras tinggi yang menarik perhatian dan memandu pengguna menelusuri halaman.

Apa itu gradien CSS?

Gradien CSS adalah transisi halus antara dua warna atau lebih yang didefinisikan sepenuhnya dalam CSS - tanpa perlu berkas gambar. Gradien dibuat memakai properti background atau background-image dengan fungsi gradien. Generator gradien warna kami menyusun string CSS gradien secara visual dan menghasilkan CSS siap produksi yang berfungsi di semua browser modern tanpa prefiks vendor.

Cara kerja generator gradien warna kami

  1. Pilih jenis gradien: pilih Linear (transisi garis lurus), Radial (bulat atau elips dari titik pusat), atau Conic (berputar di sekitar titik pusat). Gunakan preset untuk memulai secara instan.
  2. Konfigurasikan titik warna dan opsi: tambahkan hingga 10 titik warna memakai pemilih warna atau input hex. Geser slider posisi untuk menempatkan tiap titik dengan tepat. Atur arah, sudut, bentuk, ukuran, dan posisi pusat untuk jenis gradien Anda. Semua perubahan langsung memperbarui pratinjau.
  3. Salin CSS: klik "Salin CSS" untuk menyalin deklarasi background: siap produksi ke clipboard. Tempelkan langsung ke stylesheet Anda.

Tiga jenis gradien CSS

  • Gradien linear: mentransisikan warna sepanjang garis lurus. Kontrol arahnya dengan kata kunci preset (to right, to bottom, dll.) atau sudut kustom dalam derajat. Gunakan repeating-linear-gradient untuk pola garis-garis.
  • Gradien radial: mentransisikan warna keluar dari titik pusat dalam bentuk bulat atau elips. Kontrol bentuk (circle atau ellipse), ukuran (farthest-corner, closest-side, dll.), dan posisi pusat.
  • Gradien conic: mentransisikan warna dengan berputar di sekitar titik pusat - seperti roda warna atau diagram pai. Kontrol sudut awal dan posisi pusat. Ideal untuk diagram pai, roda warna, dan desain bersudut.

Posisi titik warna

Setiap titik warna memiliki posisi (0%-100%) yang menentukan di mana warna tersebut muncul pada gradien. Jika dua titik memiliki posisi yang sama, gradien menciptakan batas keras alih-alih transisi halus - berguna untuk efek garis-garis. Generator gradien warna mengurutkan titik berdasarkan posisi secara otomatis, jadi Anda bisa menambahkannya dalam urutan apa pun.

Pertanyaan yang Sering Diajukan

Generator gradien warna adalah alat visual yang menyusun kode CSS gradien dari titik warna yang dapat dikonfigurasi, jenis gradien, dan pengaturan arah. Generator kami mendukung gradien linear, radial, dan conic dengan hingga 10 titik warna serta menghasilkan CSS siap produksi. Seluruh proses pembuatan berjalan sepenuhnya di browser Anda tanpa mengirim data ke server.

Gradien linear mentransisikan warna sepanjang garis lurus dalam arah atau sudut tertentu. Gradien radial mentransisikan warna keluar dari titik pusat dalam bentuk bulat atau elips. Gradien conic mentransisikan warna dengan berputar di sekitar titik pusat - seperti roda warna. Setiap jenis memiliki kasus penggunaan dan efek visual yang berbeda.

Ya. Seluruh pembuatan gradien terjadi 100% di sisi klien pada browser Anda menggunakan JavaScript. Pilihan warna Anda tidak pernah dikirim ke server, tidak pernah disimpan, dan tidak pernah ditransmisikan ke mana pun. Generator gradien warna ini sepenuhnya privat dan aman untuk proyek klien.

Ya. Generator gradien warna ini 100% gratis, tanpa perlu daftar, tanpa fitur premium, dan tanpa batas penggunaan. Hasilkan gradien tanpa batas tanpa restriksi atau biaya tersembunyi.

Opsi berulang mengganti fungsi gradien menjadi repeating-linear-gradient, repeating-radial-gradient, atau repeating-conic-gradient. Ini mengulang pola gradien di seluruh elemen sehingga menciptakan efek garis-garis atau motif. Ukuran pola ditentukan oleh posisi titik warna Anda.

Untuk membuat batas keras antara dua warna, letakkan dua titik warna yang bersebelahan pada posisi yang sama. Misalnya, jika titik A berada di 50% dan titik B juga di 50%, gradien akan berubah secara tajam dari warna A ke warna B di titik itu tanpa pencampuran sama sekali.

Bisa. Salin nilai gradien dan gunakan pada kelas nilai arbitrer Tailwind: bg-[linear-gradient(to_right,#6366f1,#ec4899)]. Ganti spasi dengan garis bawah pada nilai arbitrer Tailwind. Alternatifnya, tambahkan gradien ke tailwind.config.js Anda di bagian theme.extend.backgroundImage.

Generator gradien warna mendukung hingga 10 titik warna per gradien. CSS sendiri tidak memiliki batas ketat jumlah titik, tetapi gradien dengan lebih dari 10 titik jarang diperlukan dalam praktik. Anda dapat menghapus titik hingga minimum 2.

Ya. Gradien linear dan radial didukung semua browser modern tanpa prefiks vendor. Gradien conic didukung Chrome 69+, Firefox 83+, Safari 12.1+, dan Edge 79+. Untuk browser lama, sebaiknya sediakan warna solid sebagai cadangan sebelum deklarasi gradien.