DevToolPal
ID

Generator Gradien CSS

Buat gradien CSS linear, radial, dan conic secara visual: titik warna, sudut dan pusat, pratinjau langsung, preset, serta CSS siap salin.

Berjalan lokal, tidak pernah diunggah

Gradien

Jenis
Titik warna

Pratinjau

CSS

Preset
CSS gradien
 
 
 
 
 
Fungsi alat ini


Generator gradien CSS memungkinkan Anda merancang gradien secara visual lalu menyalin CSS jadinya. Pilih gradien linear, radial, atau conic, tambahkan titik warna sebanyak yang Anda mau, geser posisinya, atur sudut atau titik pusat, dan pratinjau langsung diperbarui. Anda juga bisa menempelkan linear-gradient(…), radial-gradient(…), atau conic-gradient(…) yang sudah ada untuk diedit secara visual. Semuanya berjalan di browser Anda.


Cara pakai


    

  1. Mulai dari preset atau gunakan gradien contoh.
    2. 

  2. Pilih Jenis. Gradien linear dan conic punya sudut; gradien radial dan conic punya pusat yang bisa digeser dengan Pusat X dan Pusat Y.
    3. 

  3. Edit Titik warna: ubah warna dengan pemilih atau ketik warna CSS apa pun, geser Posisi, gunakan + Tambah titik untuk menyisipkan titik di celah terlebar, dan Balik untuk membalik urutan.
    4. 

  4. Aktifkan Berulang untuk mengulang gradien menjadi garis-garis dan cincin.
    5. 

  5. Salin kode dari kartu CSS, bila perlu dengan warna solid cadangan untuk browser yang sangat lama.
    6. 



Kotak CSS gradien di bagian bawah menampilkan nilai gradien dan bisa diedit: tempel gradien dari stylesheet atau alat desain, dan kontrol akan membacanya.


Contoh


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Tips gradien yang bagus


    

  • Jangan berlebihan. Dua rona yang berdekatan (biru ke ungu, oranye ke merah muda) terlihat lebih halus daripada warna berlawanan, yang bisa menjadi abu-abu kusam di tengah.
    • 

  • Tambahkan titik tengah untuk mengatur perpaduan. Titik ketiga yang sedikit lebih terang memberi sorotan lembut.
    • 

  • Titik tegas membentuk bangun. Titik di posisi yang sama menghasilkan tepi tajam: garis-garis, bendera, bilah progres, dan diagram pai memakai trik ini.
    • 

  • Arah. to right sama dengan 90deg dan to bottom (bawaan) sama dengan 180deg. Sudut dihitung searah jarum jam dari atas.
    • 

  • Teks di atas gradien harus tetap terbaca di seluruh gradien. Periksa titik paling terang dan paling gelap terhadap warna teks dengan pemeriksa kontras.
    • 

 
  
 
FAQ
 
 
  › Apa beda gradien linear, radial, dan conic?  
Gradien linear memadukan warna sepanjang garis lurus pada sudut tertentu. Gradien radial menyebar dari titik pusat berupa lingkaran atau elips. Gradien conic berputar mengelilingi pusat seperti jarum jam, cocok untuk roda warna dan diagram pai.
 
  › Bagaimana membuat garis tegas, bukan perpaduan halus?  
Beri dua titik yang bersebelahan posisi yang sama, misalnya red 50% dan blue 50%. Warna langsung berganti di titik itu. Aktifkan Berulang untuk mengulang pola, begitulah garis-garis dibuat di CSS.
 
  › Bisakah memakai warna transparan?  
Bisa. Ketik warna CSS apa pun ke titik warna, termasuk rgba(), hsl() dengan alfa, hex 8 digit, atau transparent. Pemilih warna mempertahankan alfa yang Anda atur, dan pratinjau menampilkan pola papan catur di balik area transparan.
 
  › Apakah masih perlu prefiks vendor atau warna cadangan?  
Prefiks tidak diperlukan: semua browser saat ini mendukung gradien linear, radial, dan conic tanpa prefiks. Warna solid cadangan opsional hanya penting untuk browser yang sangat lama atau alat yang membaca background-color, seperti sebagian klien email.