BerandaAlat DesainPenghasil Gradien

Penghasil Gradien

CSS Gradient Generator ini membuat gradien linear, radial, dan conic dari dua atau tiga warna dengan pratinjau langsung dan CSS background yang siap disalin.

Tentang alat ini

CSS Gradient Generator ini membuat gradien linear, radial, dan conic dari dua atau tiga warna dengan pratinjau langsung dan CSS background yang siap disalin.

Cara menggunakan

  1. Pilih jenis gradien: linear, radial, atau conic.
  2. Atur sudut dengan slider (0–360°).
  3. Pilih dua warna, atau centang Gunakan 3 warna untuk menambahkan warna ketiga.
  4. Klik Salin CSS dan tempel aturan background ke stylesheet Anda.

Perlu diketahui

  • linear-gradient() memadukan warna di sepanjang garis lurus yang ditentukan oleh sudut, dengan 90deg berjalan dari kiri ke kanan.
  • radial-gradient(circle, …) menyebarkan warna ke luar dari titik tengah.
  • conic-gradient(from <angle>, …) memutar warna mengelilingi titik tengah, berguna untuk diagram lingkaran dan roda warna.
  • Gradien CSS adalah gambar yang dirender oleh browser, jadi bisa diperbesar ke ukuran apa pun tanpa menambah ukuran file.
  • Ketiga fungsi gradien didukung di semua browser utama saat ini.

Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.

Pertanyaan umum

Bagaimana cara membuat gradien CSS?

Gunakan fungsi gradien sebagai background, misalnya background: linear-gradient(135deg, #1db954, #0a1628). Alat ini menuliskan baris tersebut untuk Anda berdasarkan warna dan sudut yang dipilih.

Apa perbedaan gradien linear, radial, dan conic?

Gradien linear berubah warna di sepanjang garis, gradien radial memancar dari titik tengah, dan gradien conic berputar mengelilingi titik tengah seperti jarum jam.

Bisakah gradien memiliki lebih dari dua warna?

Bisa. Gradien CSS menerima color stop dalam jumlah berapa pun. Generator ini mendukung dua atau tiga warna; Anda bisa menambahkan stop lain secara manual pada CSS yang disalin.

Apakah gradien CSS memperlambat website?

Tidak secara signifikan. Gradien digambar oleh browser dan tidak memerlukan unduhan gambar, jadi biasanya lebih ringan daripada file gambar gradien.