Pembuat Wallpaper Gradien Gratis
Buat dan unduh wallpaper gradien kustom.
Tentang gradien
Gradien CSS memungkinkan Anda membuat transisi warna yang halus tanpa gambar, mengurangi ukuran file dan meningkatkan kinerja. Alat ini menghasilkan baik file PNG untuk digunakan sebagai wallpaper dan kode CSS yang dapat digunakan kembali di situs web.
Pertanyaan umum
Apa perbedaan antara gradien linier, radial, dan konik?
Gradien linier mengalir dalam garis lurus pada sudut yang ditentukan. Gradien radial memancar dari titik tengah. Gradien konik berputar di sekitar titik tengah seperti roda warna. Masing-masing menghasilkan efek visual yang berbeda.
Bisakah saya menggunakan gradien CSS di situs saya?
Ya! Gradien CSS didukung oleh semua browser modern dan tidak memerlukan gambar. Mereka beradaptasi dengan semua ukuran, dimuat lebih cepat, dan tetap tajam di setiap layar. Salin CSS yang dihasilkan oleh alat ini ke stylesheet Anda.
Apa resolusi terbaik berdasarkan perangkat saya?
Monitor desktop biasanya menggunakan 1920×1080, laptop bervariasi, layar 4K menggunakan 3840×2160, iPhone 1080×1920, dan iPad 2048×2732. Pilih resolusi yang sesuai dengan perangkat Anda untuk wallpaper yang sempurna tajam.
Gradien di web, sejarah singkat
Gradien memiliki sejarah pra-digital yang panjang dalam dunia cetak dan airbrush. Kosakata «gradien» sebagai rampa halus dari satu warna ke warna lain berasal langsung dari kromolitografi dan seni poster airbrush akhir abad kesembilan belas; mahasiswa desain Bauhaus berlatih latihan rampa tonal pada tahun 1920-an jauh sebelum ada piksel yang mendorongnya ke layar.
Gradien digital hadir dalam dua momen berdekatan di awal 1990-an. Adobe Photoshop 1.0 (Februari 1990) dilengkapi alat gradien sejak hari pertama, algoritma «blend» yang menginterpolasi antara swatch foreground dan background dengan fall-off linier dan radial. Adobe PostScript Level 2 (1991) memperkenalkan pola shading sebagai fitur bahasa kelas pertama; sebelumnya, PostScript Level 1 tidak punya cara untuk mendeskripsikan gradien secara native sehingga harus dipalsukan dengan isian berlapis abu-abu yang bertahap. PostScript Level 3 (1997) menambahkan shading mesh Type 6 (patch Coons) dan Type 7 (tensor-product) yang menggerakkan setiap gradien cetak di industri majalah akhir 1990-an. Alat mesh-gradient Adobe Illustrator hadir di versi 8 (1998).
Gradien CSS di web hadir lebih lambat dari yang diingat orang. -webkit-gradient() WebKit dikirimkan di Safari 4 dan Chrome 1 pada tahun 2008 dengan sintaks verbosenya sendiri. -moz-linear-gradient() Mozilla menyusul di Firefox 3.6 (Januari 2010), menggunakan sintaks yang akhirnya menjadi standar. linear-gradient() dan radial-gradient() tanpa awalan mencapai W3C Candidate Recommendation pada April 2012 dan dapat digunakan secara luas dari sekitar 2013. conic-gradient() jauh lebih baru, Chrome 69 pada September 2018 (di balik flag), tanpa flag di Chrome 75 (Juni 2019), Firefox 83 (November 2020). Kini tersedia secara Baseline di setiap browser modern.
Skeuomorfis, lalu datar, lalu gradien lagi
Gradien menjadi bahasa visual desain web akhir 1990-an dan awal 2000-an, tombol Web 2.0 berkaca, berlapis bevel, dan reflektif dari antarmuka Apple Aqua (2000) pada dasarnya adalah gradien bersarang dengan sorotan dalam tajam di atas fade badan yang lembut. Gerakan desain datar mengkristal di sekitar Metro Microsoft (Windows Phone 7, 2010) dan iOS 7 Apple (2013), bereaksi terhadap skeuomorfisme berat gradien dengan menghilangkan setiap bayangan, bevel, dan blend dari UI. Selama kira-kira lima tahun (2013-2018), gradien tidak modis.
Pendulum berayun kembali keras dari tahun 2017 dan seterusnya. Gradien mesh multi-warna animasi Stripe di beranda-nya menetapkan template yang disalin seluruh industri SaaS. Rebrand logo Instagram tahun 2016 menggantikan kamera datar dengan gradien merah muda-oranye-ungu jenuh (gema yang disengaja dari logo fotografi 1980-an). Menjelang akhir dekade, gradien kembali ada di mana-mana, tetapi dengan kosakata baru: mesh, blob buram, mulus-OKLCH, sadar aksesibilitas. Tailwind CSS 4 (Januari 2025) hadir dengan serangkaian utilitas gradien default yang dikurasi termasuk gradien konik dengan petunjuk interpolasi hue.
Sintaks gradien CSS dalam satu layar
Ketiga fungsi gradien CSS mengambil daftar color stop dan arah:
linear-gradient(angle, colors…): sudut dalam CSS menggunakan konvensi kompas-bearing:0degmenunjuk ke atas (warna pertama di bawah),90degmenunjuk ke kanan,180degmenunjuk ke bawah (default),270degmenunjuk ke kiri. Perhatikan ini adalah arah berlawanan dari sudut polar matematis. Anda juga bisa menggunakan kata kunci:to top rightmenghitung sudut sehingga garis gradien melewati diagonal, tidak sama dengan gradien 135° pada kotak non-persegi.radial-gradient(shape size at position, colors…): warna menyapu keluar dari titik pusat.circleatauellipse; kata kunci ukuranclosest-side,farthest-corner; posisi default ke tengah.conic-gradient(from angle at position, colors…): warna berputar searah jarum jam di sekitar pusat, seperti roda warna. Berguna untuk diagram lingkaran, efek sapuan, dan tampilan «donut chart». Varian berulang dari ketiganya (repeating-linear-gradient, dll.) mengulangi color stop secara tak terbatas.
Hard stop (menempatkan dua color stop pada persentase yang sama) menciptakan pita tajam daripada blend halus: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) adalah pembagian dua warna, bukan gradien. Berguna untuk garis-garis, kartu dengan warna bagian, atau pseudo-border.
Revolusi OKLCH, dan titik tengah abu-abu keruh
Gradien dari merah murni #ff0000 ke hijau murni #00ff00 dalam interpolasi sRGB default melewati kuning-coklat desaturasi dan keruh di sekitar #7f7f00. Ini terjadi karena interpolasi linier sRGB mengurangi channel R dan G di titik tengah, dan mata kita mempersepsikan titik tengah jauh lebih gelap dan kurang tersaturasi dari kedua endpoint. Titik nyeri desain web klasik.
CSS Color Module Level 4 menambahkan ruang warna seragam secara perseptual dan kemampuan menginterpolasi gradien di dalamnya: linear-gradient(in oklch, red, green). OKLCH (dan saudaranya OKLab), yang dirancang oleh Björn Ottosson pada Desember 2020, memisahkan lightness, chroma, dan hue sehingga menginterpolasi sepanjang sumbu hue mengambil jalur terpendek di sekitar roda warna, mempertahankan saturasi sepanjang waktu. Gradien merah-ke-hijau yang sama dalam OKLCH melewati kuning vivid di titik tengah.
Aturan umum:
- Dua hue analogus (merah ke oranye, biru ke ungu), sRGB dan OKLCH terlihat mirip; biasanya tidak masalah.
- Dua hue komplementer (merah ke hijau, biru ke oranye) sRGB menghasilkan abu-abu keruh, OKLCH menghasilkan sapuan hue yang vivid. OKLCH menang telak.
- Satu warna ke putih atau hitam: sRGB terlihat kusam di titik tengah; OKLCH menjaga perubahan lightness yang dipersepsikan tetap halus.
- Dua warna desaturasi dengan lightness serupa: perbedaan minimal.
Dukungan browser: interpolation-method untuk gradien hadir di Safari 16.2 (Desember 2022), Chrome 111 (Maret 2023), dan Firefox 113 (Mei 2023), kini Baseline Widely Available.
Preset resolusi, pilih jumlah piksel yang tepat
Wallpaper yang lebih kecil dari layar akan diregangkan dan terlihat buram; yang jauh lebih besar membuang ukuran file dan memori. Target umum di 2026:
| Resolusi | Nama umum | Di mana |
|---|---|---|
| 1920×1080 | Full HD / 1080p | Laptop dan desktop paling umum di 2026 |
| 2560×1440 | QHD / 2K | Monitor gaming dan kreator mainstream |
| 3440×1440 | UWQHD ultrawide | Monitor ultrawide melengkung 21:9 |
| 3840×2160 | 4K / UHD | Desktop kelas atas dan Apple Studio Display |
| 5120×2880 | 5K | Apple iMac Retina, Studio Display |
| 1080×1920 | Portrait ponsel | Baseline Android FHD umum |
| 1170×2532 / 1290×2796 | iPhone modern | Keluarga iPhone 13-16 pada 19,5:9 |
| 2048×2732 | iPad Pro 12,9 inci | Tablet 4:3 |
Kapan Anda membutuhkan ini
- Wallpaper perangkat pribadi: desktop, lock screen, home screen, bahkan latar belakang tampilan smartwatch.
- Latar belakang virtual konferensi video. Gradien solid lebih mudah untuk auto-segmentasi Zoom/Teams/Meet daripada foto yang ramai, gradien mengurangi artefak «halo» di sekitar pembicara.
- Header media sosial: Twitter/X 1500×500, LinkedIn 1584×396, banner channel YouTube 2560×1440 (dengan pertimbangan safe-area), Instagram Stories 1080×1920.
- Gradien identitas brand. Mesh ungu-biru Stripe, merah muda-oranye-ungu Instagram, lime-ke-hijau gelap Spotify, ungu-merah muda Slack, semuanya adalah contoh nyata gradien yang mendefinisikan brand.
- Bagian hero di halaman web, meskipun gradien CSS biasanya diterapkan langsung melalui
background-image, fallback PNG berguna untuk email (sebagian besar klien email masih belum merender gradien CSS dengan andal) dan untuk browser tanpa interpolasioklch. - Empty state, loading skeleton, kartu dashboard: permukaan UI yang mendapat manfaat dari minat visual yang lembut tanpa mengganggu.
- Cetak dan merchandise. Wallpaper 4K pada 300 DPI kira-kira mencakup poster 12 × 18 inci.
Aksesibilitas, teks di atas gradien
Kesalahan praktis paling umum dengan latar belakang gradien adalah gagal kontras untuk teks yang dilapisi. WCAG 2.2 SC 1.4.3 (Kontras Minimum, Level AA) memerlukan 4,5:1 untuk teks isi dan 3:1 untuk teks besar (18 pt reguler atau 14 pt tebal). WCAG ditulis untuk latar belakang solid; dengan gradien, rasio kontras di setiap titik di bawah teks penting, titik terburuk adalah yang dihitung.
Perbaikan praktis saat Anda meletakkan teks di atas gradien: tambahkan scrim hitam atau putih semi-transparan di bawah teks, batasi gradien di bawah teks ke rentang lightness yang sempit, atau gunakan text-shadow yang kuat sebagai fallback. Gradien vertikal (atas-gelap, bawah-terang) umumnya lebih ramah teks daripada diagonal, teks yang mengalir kiri-ke-kanan menghadapi lightness latar belakang yang konstan di setiap baris; gradien 45° di bawah blok teks panjang memaksa setiap baris melintasi rentang lightness, membuat kontras yang konsisten jauh lebih sulit.
Pertanyaan lainnya
Mengapa gradien saya memiliki pita yang terlihat?
Dua penyebab umum. Pertama, kompresi JPEG, encoding berbasis DCT JPEG menghasilkan «blokir» yang terlihat pada rampa tonal halus, terutama di wilayah saturasi rendah. Simpan sebagai PNG atau WebP-lossless sebagai gantinya. Kedua, kedalaman warna 8-bit per channel: gradien 8-bit antara dua warna yang dekat hanya memiliki beberapa langkah tonal yang berbeda dan mata terkadang dapat mendeteksinya. Menambahkan hamparan noise/dither halus (noise 1-2%) memecah pita dengan menambahkan variasi alami; banyak alat desain kelas atas melakukan ini secara otomatis.
Haruskah saya menggunakan linear, radial, atau konik untuk wallpaper desktop?
Untuk sebagian besar wallpaper, linear pada diagonal ringan (sekitar 135°) atau radial dipusatkan di luar layar terlihat paling baik, keduanya menciptakan asimetri tanpa mengganggu. Gradien konik mencolok tetapi terbaca sebagai «dirancang-oleh-desainer» daripada backdrop ambient, sehingga lebih baik untuk permukaan aksen (cover album, postingan sosial) daripada wallpaper yang Anda tatap delapan jam sehari. Gradien mesh (beberapa gradien radial yang tumpang tindih) adalah tampilan paling modern tetapi memerlukan pustaka JS atau gambar yang dihasilkan, gradien radial tunggal dengan dua hue komplementer pada saturasi rendah adalah pendekatan yang baik.
Kombinasi warna mana yang terlihat paling baik?
Tiga pola yang andal: analogus (dua warna yang berdekatan di roda (ungu ke biru, oranye ke merah) terbaca sebagai tenang dan harmonis; monokromatik (hue sama, lightness bervariasi) biru Stripe klasik terbaca sebagai branded dan halus; triadik-plus-OKLCH (tiga atau empat warna berjarak sama yang diinterpolasi dalam ruang perseptual) memberikan tampilan Stripe / Instagram modern. Hindari dua warna komplementer murni (merah/hijau, biru/oranye) kecuali Anda secara eksplisit menggunakan interpolasi oklch(), sRGB akan memberi Anda titik tengah yang keruh.
Apakah ada yang dikirim ke server?
Tidak. Gradien dirender ke elemen <canvas> di browser Anda, PNG diekspor melalui canvas.toDataURL(), dan string CSS dibuat oleh JavaScript secara lokal. Tidak ada yang terkait pilihan warna, dimensi, atau gambar hasilnya yang meninggalkan halaman.