Gradien CSS Tanpa Stack Overflow — Buat Secara Visual dan Kirim

Anda membuka file CSS baru, mengetik background:, lalu memandang layar. Anda tahu bahwa Anda ingin gradient. Anda tahu propertinya adalah linear-gradient. Anda tidak ingat apakah sudutnya dimulai terlebih dahulu atau terakhir, apakah derajat bergerak secara jam atau berlawanan arah jarum jam, atau mengapa warna yang Anda ketik tampak tidak sama dengan apa yang Anda bayangkan.

Artikel ini memperbaiki hal itu. Kita akan membahas secara rinci bagaimana gradient CSS bekerja — sintaksisnya, logika sudut, dan pola yang sebenarnya Anda gunakan — serta memberikan tautan ke generator visual agar Anda tidak perlu menebak lagi dan mulai mengirimkan hasilnya.

Cara Linear-Gradient Sebenarnya Bekerja

Sintaks dasarnya adalah:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Itu direction adalah yang membingungkan orang. Anda memiliki dua pilihan: kata kunci atau sudut dalam derajat.

Kata kunci: to top, to bottom (default), to left, to right, dan diagonal: to top right, to bottom left, dsb.

Derajat: 0deg mengarah ke atas (sama seperti to top). Sudutnya meningkat secara jam, jadi 90deg mengarah ke kanan, 180deg mengarah ke bawah, 270deg mengarah ke kiri.

Bagian penting yang perlu dihafal: 0derajat = ke atas, berputar berlawanan arah jarum jam dari sana. Semua hal lainnya mengikuti dari itu.

Enam Pola yang Akan Anda Gunakan Minggu Ini

1. Dari Atas ke Bawah (Default)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. Menurun ke Transparan

Menggabungkan teks pada gambar? Anda perlu bagian bawah gelap dan bagian atas jelas. Gunakan transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Satu catatan: hindari transparent di Safari saat transisi dari nilai berwarna — itu akan melalui warna hitam. Gunakan rgba(r, g, b, 0) dengan nilai RGB yang sama sebagai gantinya.

3. Latar Belakang dengan Sudut Hero

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg secara kasar dari kiri bawah ke kanan atas — sudut klasik seperti sampul majalah. Gradient multi-titik seperti ini didefinisikan dengan persentase posisi setelah setiap warna. Tanpa persentase, CSS mendistribusikannya secara merata.

4. Pencahayaan Lemah pada Kartu

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Kartu yang menggunakan warna putih murni terlihat datar saat ditempatkan di latar belakang putih. Gradient tipis dari putih murni ke abu-abu sangat terang memberikan kedalaman tanpa terlihat dirancang. Ini adalah gradient yang tidak pernah diperhatikan, yang merupakan intinya.

5. Overlay pada Tombol

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Gradient dari kiri ke kanan (90deg) terasa dinamis. Gabungkan dengan state hover yang mengubah posisi latar belakang (menggunakan background-size: 200% dan transisi background-position) untuk efek geser halus pada tombol.

6. Hentian Warna Tegas (Tidak Ada Blending)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Dua hentian warna pada posisi yang sama menciptakan garis tajam tanpa blending. Berguna untuk tata letak split-screen, indikator progres, dan pola garis — semua tanpa elemen tambahan atau gambar.

Gradient Radial: Yang Lainnya

radial-gradient mengeluar dari titik pusat, bukan bergerak dalam arah tertentu:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

Argumen pertama adalah bentuk (circle atau ellipse) diikuti oleh posisi. at center adalah default. Pindahkan titik fokus dengan at top left, at 30% 60%, dll. Gradient radial sangat baik untuk efek pencahayaan, tombol yang bercahaya, dan latar belakang halaman berbentuk lingkaran.

Sintaks yang Tidak Dihafal (dan Cara Menyimpannya)

Tiga hal yang membingungkan pengembang, dalam urutan frekuensi:

• Sudut sebelum warna — arah selalu datang sebelum setiap hentian warna.
• Derajat berputar jam — 90deg adalah ke kanan, bukan ke atas. 0deg adalah ke atas.
• Bandingan transparan ke warna — browser akan meloloskan melalui warna hitam kecuali Anda menyamai nilai RGBA di kedua ujungnya.

Jika Anda ingin menghindari uji coba dan kesalahan, Pembuat Gradien CSS di iotools.cloud memungkinkan Anda memilih warna secara visual, menarik hentian warna, membalikkan sudut, dan menyalin CSS akhir dalam satu klik. Tidak perlu menebak apa bentuk 143deg terlihat.

Dukungan Peramban

linear-gradient dan radial-gradient Dukungan dasar di semua browser modern — Chrome, Firefox, Safari, dan Edge semua mendukungnya tanpa prefix. Anda tidak perlu -webkit- prefix untuk sintaksis gradient standar pada tahun 2026.

Satu kecuali adalah sintaksis lama -webkit-linear-gradient yang digunakan oleh Safari 5.1 dan Chrome 10–25. Kecuali Anda mendukung browser dari tahun 2012, Anda bisa mengabaikannya.

conic-gradient memiliki dukungan kuat di browser modern tetapi tidak memiliki fallback untuk IE/versi lama — gunakan ini saat browser yang didukung selalu ada.

Lewati Sintaks — Buat Secara Visual

Sintaks gradient CSS tidak rumit, tetapi membutuhkan banyak waktu untuk disesuaikan secara manual. Fitur Pembuat Gradien CSS di iotools.cloud memberi Anda tampilan langsung, drag-and-drop hentian warna, kontrol ketik untuk linear atau radial, dan salin satu klik. Bangun gradient secara visual, tempel hasilnya, dan kirimkan.

Anda mungkin juga menyukai