Wallpaper
Halaman Mewarnai

Pembuat Gradien

Bangun Gradien Linear, Radial, dan Mesh Secara Visual

Bangun gradien linear atau radial dengan keluaran CSS siap salin-tempel.

Seret gambar untuk mengekstrak warna, atau pilih warna di bawah

Gratis untuk dicoba.

Pilih dua warna atau lebih, seret gradien sesuai selera, salin CSS. Atau unduh sebagai PNG untuk digunakan sebagai wallpaper, latar slide, atau latar belakang postingan media sosial. Gradien linear, radial, dan kerucut didukung, plus mode gradien mesh untuk latar belakang lembut ala Apple yang Anda lihat di antarmuka modern.

Jenis gradien yang dijelaskan

  • Linear: garis lurus dari warna A ke warna B. Pemilih arah (atas→bawah, diagonal, dll.).
  • Radial: konsentris — warna A di tengah memudar ke warna B di tepi. Berguna untuk efek sorotan.
  • Kerucut: melingkar di sekitar titik pusat seperti roda warna. Tren dalam desain UI modern.
  • Mesh (premium): beberapa gumpalan warna yang menyatu mulus. Tampilan "gradien Apple".

Apa yang dapat Anda salin

  1. CSS: siap ditempel linear-gradient(...) atau deklarasi background-image:.
  2. Tailwind: kelas bg-gradient-* terdekat ditambah tambahan warna kustom.
  3. SVG: untuk penggunaan berskala dalam ikon atau grafik UI.
  4. Unduh PNG: ukuran berapa pun, termasuk wallpaper ponsel (1284×2778), desktop (3840×2160), dan persegi (1080×1080).

Kasus penggunaan umum

  • Wallpaper ponsel: gradien mesh sangat populer di iOS. Coba Pratinjau Wallpaper iPhone kami untuk menguji.
  • Latar belakang postingan media sosial: tampilan merek instan untuk grafik kutipan.
  • Bagian hero: latar gradien ada di mana-mana di halaman arahan.
  • Dek slide: ganti latar belakang polos yang membosankan.

Memilih warna yang cocok

Bersebelahan pada roda warna = lembut, harmonis. Berlawanan = berani, menarik perhatian. Tambahkan titik tengah ketiga untuk menjembatani jarak yang lebar. Untuk gradien setia merek, tempelkan HEX merek Anda dan pilih warna lebih terang atau lebih gelap untuk titik kedua. Gunakan Konverter Warna kami untuk menemukan warna lebih terang (HSL dengan kecerahan lebih tinggi) atau lebih gelap (lebih rendah).

Pertanyaan yang sering diajukan

Bisakah saya menggunakan ini di produksi?

Ya — CSS yang disalin berfungsi di semua browser modern. Fallback SVG disediakan untuk target yang lebih lama.

Bagaimana dengan dukungan browser untuk gradien radial?

Universal di browser modern. Sintaks CSS hanya satu baris.

Seberapa besar saya bisa mengekspor PNG?

Gratis: hingga 4K (3840×2160). Premium: 8K dan seterusnya.

Apakah gradien mesh sulit digunakan?

Di web, mereka berbasis SVG atau canvas. Kami memberi Anda PNG yang diratakan untuk kemudahan penggunaan, plus sumber SVG untuk diedit.

Bisakah saya menyimpan gradien saya?

Masuk (gratis) dan gradien yang disimpan akan muncul di perpustakaan Anda.

Apa itu gradien 'conic'?

Menyapu di sekitar suatu titik — seperti roda warna atau diagram lingkaran. CSS modern mendukungnya secara native.

Apakah ini berfungsi untuk gradien animasi?

Hanya ekspor statis. Untuk latar belakang animasi, salin CSS dan tambahkan animasi CSS di sekitar sudut gradien.

Kenapa tidak menulis CSS secara manual?

Bisa saja — alat ini hanya mempercepat iterasi visual. Salin dan sesuaikan.

Tentang Pembuat Gradien

Pembuat Gradien adalah alat online gratis dari Wallpapers.com yang berjalan sepenuhnya di browser Anda — tanpa instalasi, tanpa tanda air, tanpa pendaftaran email untuk percobaan pertama. Bangun gradien linear atau radial dengan keluaran CSS siap salin-tempel.

Cara menggunakan Pembuat Gradien

  1. Pilih warna dari swatch atau tempel nilai HEX / RGB.
  2. Sesuaikan output — palet, kontras, warna komplementer.
  3. Salin nilainya, atau ekspor swatch sebagai JSON.

Kapan menggunakannya

Kasus penggunaan umum meliputi: menyiapkan gambar untuk unggahan web, daftar e-commerce, platform media sosial dengan batasan format, dan mengonversi file dari satu perangkat atau aplikasi ke yang lain.

Gratis vs Premium

Setiap pengunjung mendapat percobaan gratis; pengguna gratis yang masuk mendapat kuota harian lebih tinggi. Berlangganan Premium untuk penggunaan tanpa batas, pemrosesan massal hingga 200 gambar per tugas, antrian prioritas, dan penjelajahan bebas iklan.

Alat terkait

Mencari sesuatu yang sedikit berbeda? Coba Pemilih Warna dari Gambar , Ekstraktor Palet atau Konverter Skala Abu-abu — atau jelajahi semua Color Tools alat.

⭐ Premium

Buka semua alat — tanpa batas, tanpa menunggu

  • ✓ 200 kredit AI / bulan — gen gambar, upscale, inpaint
  • ✓ Pemrosesan batch massal (hingga 200 file sekaligus)
  • ✓ Unduhan 8K + penjelajahan bebas iklan
  • ✓ Antrean prioritas — tanpa batas laju
Coba Gratis selama 7 Hari →
live
Make wallpapers
with AI.
›
Try →