Langsung ke konten utama
LibraTool logoLibraTool

Generator Gradien CSS gratis

Buat gradien CSS linear, radial, dan konik dengan pratinjau langsung. Salin CSS dengan satu klik.

Berfungsi offline setelah dimuat
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Menghindari titik tengah abu-abu di antara warna yang sangat berbeda. Menambahkan baris sRGB biasa sebagai cadangan untuk browser lama.

0%
100%

Prasetel

Penggunaan umum

  • Buat Gradien untuk Bagian HeroRancang latar belakang gradien halaman penuh untuk bagian hero situs web dan halaman arahan.
  • Buat Tombol dan CTA GradienRancang latar belakang tombol gradien yang menarik perhatian untuk ajakan bertindak yang menonjol.
  • Buat Latar Belakang Gradien untuk KartuRancang pengisian gradien untuk kartu, modal, bilah sisi, dan latar belakang komponen UI.
  • Buat Gradien untuk Grafis Media SosialRancang latar belakang gradien yang hidup untuk posting Instagram, thumbnail YouTube, dan kartu Twitter.
  • Buat Skala Warna untuk GrafikHasilkan skala warna gradien untuk peta panas, batang kemajuan, dan visualisasi data.

Cara kerja

Generator gradien membangun string gradien CSS langsung di browser — tanpa library, tanpa server, tanpa unggahan. Fungsi tulisan tangan merangkai sintaks linear-gradient, radial-gradient, atau conic-gradient yang benar dari stop warna dan sudut Anda secara real time, lalu memformat hasilnya untuk target keluaran mana pun yang Anda pilih.

  1. 1
    Konfigurasi stop dan arah
    Anda mengatur antara 2 hingga 6 stop warna menggunakan pemilih warna native browser, lalu memposisikan setiap stop sepanjang sumbu 0–100% dengan penggeser rentang. Untuk gradien linear dan conic, Anda juga memilih sudut (0–360°); untuk gradien radial, Anda memilih bentuk (elips atau lingkaran) dan kata kunci ukuran yang mengontrol seberapa jauh gradien meluas.
  2. 2
    buildCss merangkai string gradien
    Setiap ada perubahan, fungsi buildCss lokal merangkai parameter Anda menjadi panggilan fungsi CSS yang benar — misalnya linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Tidak ada library yang terlibat; string dibangun dengan logika template JavaScript biasa dan digabungkan langsung dari array stop.
  3. 3
    Pratinjau langsung dirender via gaya inline
    String gradien yang dirangkai diterapkan langsung ke elemen div sebagai gaya latar inline, sehingga mesin CSS browser sendiri merender pratinjau. Tidak ada canvas atau gambar yang terlibat — apa yang Anda lihat secara harfiah adalah properti CSS yang diterapkan.
  4. 4
    Keluaran siap-salin dalam empat format
    Pemilih format mengubah string gradien yang sama menjadi CSS biasa (background: ...), blok CSS dengan fallback padat, kelas nilai-sembarang Tailwind, atau deklarasi variabel SCSS. Mengklik Salin menulis keluaran yang dipilih ke clipboard via navigator.clipboard.writeText. Gradien saat ini juga dikodekan ke dalam hash URL sehingga Anda bisa menandai atau membagikannya.

Alat terkait

🟦

Generator CSS Grid

Desain CSS grid secara visual — track, unit, dan gap — lalu salin CSS dan HTML yang dihasilkan.

Coba
↔️

Generator CSS Flexbox

Eksperimen dengan flex direction, wrap, justify dan align pada item langsung — dan salin CSS.

Coba
🧮

Kalkulator Matriks

Tambah, kurang, kali, transpos, invers, dan reduksi matriks, plus determinan, rank, nilai eigen, dan penyelesaian Ax = b — hingga 8×8, dengan salin sekali ketuk. Gratis dan privat.

Coba

Pertanyaan yang sering diajukan