CSS Gradient untuk Website: Cara Membuat Background, Text & Gradient Generator

CSS gradient menghasilkan transisi warna yang browser gambar lewat fungsi seperti linear-gradient(). Hasil fungsi itu termasuk tipe gambar CSS (<image>), bukan warna solid. Jadi tempel lewat background atau background-image, bukan background-color. Satu baris cukup untuk hero: background: linear-gradient(135deg, #111827, #7c3aed, #06b6d4);

Selanjutnya, pembaca artikel ini kerap web developer, desainer UI, atau pemilik website yang ingin mengontrol gradasi tanpa export PNG berulang. Kami urutkan dari syntax yang tim front-end benar-benar pakai di produksi, baru daftar gradient generator sebagai alat bantu setelah Anda paham rumusnya.

Apa Itu CSS Gradient?

Menurut dokumentasi gradient MDN, gradasi CSS tidak punya dimensi intrinsik: area mengikuti elemen tempat Anda memakai gradient. Browser menghitung warna per pixel di jalur yang Anda tentukan—vertical, radial dari pusat, atau mengelilingi titik (conic).

Berikut jenis yang paling sering muncul di codebase website:

• linear-gradient() — transisi sepanjang garis lurus (hero, tombol, overlay).
• radial-gradient() — dari pusat ke luar (spotlight, glow, vignette).
• conic-gradient() — warna berputar (ring dekoratif, bukan chart data).
• repeating-linear-gradient() dan saudaranya — stripe atau tekstur tanpa file raster.

Tetapi gradient juga hidup di luar background: teks aksen, border lewat border-image, lapisan di atas foto hero, atau kombinasi beberapa lapisan background sekaligus.

Tutorial Cepat: Background Gradient Pertama

Sebelum teori panjang, mulailah dari dua warna tanpa stop eksplisit; browser membagi transisi merata:

.box {
  background: linear-gradient(#2563eb, #7c3aed);
}

Kemudian, arah horizontal dengan keyword:

.box {
  background: linear-gradient(to right, #2563eb, #7c3aed);
}

Setelah keyword, coba sudut derajat:

.box {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

Apabila preview sudah tampil di DevTools, lanjut ke rumus lengkap dan color stop—bukan langsung ke daftar situs generator.

Syntax linear-gradient() dan Color Stop

Berikut bentuk mental yang stabil:

linear-gradient(arah-atau-sudut, warna-stop-1, warna-stop-2, ...)

Setelah itu, contoh tiga warna dengan posisi eksplisit:

.section {
  background: linear-gradient(
    90deg,
    #111827 0%,
    #7c3aed 50%,
    #06b6d4 100%
  );
}

Tanpa persentase, browser mendistribusikan stop otomatis. Hard stop (transisi tajam) muncul bila dua stop berbagi batas yang sama:

background: linear-gradient(
  to right,
  #2563eb 0 50%,
  #7c3aed 50% 100%
);

Multi-color untuk branding tidak terbatas pada dua hex—walau hierarki visual tetap butuh jarak antar warna yang cukup kontras.

Arah Gradient: Keyword vs deg

Keyword to right, to left top, dan sejenisnya berarti transisi menuju arah tersebut. Berikut mapping sudut yang sering disalin dari cheat sheet:

• 0deg → ke atas
• 90deg → ke kanan
• 180deg → ke bawah
• 270deg → ke kiri

linear-gradient(to right, red, blue) searah dengan linear-gradient(90deg, red, blue) untuk kebutuhan layout umum. Unit turn, rad, atau grad valid, tetapi tim front-end kerap memakai deg agar diff code review terbaca cepat.

Format Warna dan Color Space Modern

Selain HEX, stop gradient menerima named color, rgb() modern (spasi, bukan koma), HSL, transparansi, sampai oklch(). Contoh alpha pada overlay:

background: linear-gradient(
  rgb(0 0 0 / 80%),
  transparent
);

Interpolation di color space tertentu Anda tulis setelah sudut:

background: linear-gradient(90deg in oklab, #2563eb, #ec4899);

background: linear-gradient(
  90deg in oklch longer hue,
  red,
  blue
);

Namun wide gamut (Display-P3) hanya bernilai bila perangkat dan fallback sRGB Anda sudah diuji:

background: linear-gradient(
  90deg,
  color(display-p3 1 0.2 0.4),
  color(display-p3 0.2 0.4 1)
);

Selanjutnya, panduan gradients di web.dev menempelkan contoh serupa pada alur belajar CSS resmi Google.

Linear, Radial, Conic, dan Repeating

Linear tetap default hero dan CTA. Radial mengontrol bentuk (circle / ellipse), posisi (at top left), dan ukuran (closest-side, farthest-corner):

background: radial-gradient(
  circle at center,
  #7c3aed 0%,
  #111827 70%
);

Conic cocok untuk ring dekoratif; jangan menggantikan grafik data karena background tidak membawa makna ke pembaca layar:

background: conic-gradient(
  from 0deg,
  #2563eb,
  #7c3aed,
  #ec4899,
  #2563eb
);

Repeating stripe tanpa PNG:

background: repeating-linear-gradient(
  45deg,
  #111827 0 10px,
  #1f2937 10px 20px
);

Kemudian, pola berulang ini sering memadukan koleksi pattern siap pakai—lihat artikel background pattern gratis bila Anda butuh tekstur di luar gradasi halus.

Gradient pada Text, Button, Border, dan Overlay

Text gradient css umum untuk heading aksen:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #ec4899);
  background-clip: text;
  color: transparent;
}

Meski efeknya menarik, uji kontras dan siapkan fallback: paragraf panjang tetap lebih aman dengan warna solid. Tombol memakai gradient sebagai background; hover cukup menggeser stop atau sedikit menggelapkan stop akhir—bukan animasi agresif di setiap CTA.

Sedangkan border dengan border-image:

.card {
  border: 2px solid transparent;
  border-image: linear-gradient(90deg, #2563eb, #ec4899) 1;
}

Namun sudut membulat sering butuh pseudo-element plus mask; border-image saja jarang cukup untuk radius besar. Overlay foto hero menumpuk gradient di atas url()—lapisan pertama dalam daftar background tampil paling atas:

.hero {
  background:
    linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 20%)),
    url("hero.webp") center / cover no-repeat;
}

Beberapa radial transparan di atas linear gelap meniru mesh glow tanpa asset bitmap:

.hero {
  background:
    radial-gradient(circle at 20% 20%, rgb(59 130 246 / 45%), transparent 40%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 35%), transparent 45%),
    linear-gradient(135deg, #0f172a, #111827);
}

Shorthand background vs background-image

background-image: linear-gradient(...) hanya mengganti lapisan gambar. Shorthand background: bisa menimpa background-size atau background-repeat bila Anda lupa longhand. Lantaran itu, di komponen design system besar longhand sering lebih aman; di prototype satu elemen, shorthand lebih ringkas.

Animasi Gradient dan prefers-reduced-motion

Namun transisi langsung antar fungsi gradient tidak konsisten di semua engine. Pola aman: gradient lebih lebar, lalu animasi background-position:

.animated-gradient {
  background: linear-gradient(
    90deg,
    #2563eb,
    #7c3aed,
    #ec4899,
    #2563eb
  );
  background-size: 300% 300%;
  animation: gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Akhirnya, hormati pengguna yang mematikan motion:

@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none;
  }
}

Aksesibilitas, Kontras, dan Performa

Sebelum menerapkan teks di atas gradasi, uji kontras pada titik terburuk—bukan hanya warna ujung. WCAG 2.2 menuntut minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar pada pemahaman contrast minimum. Overlay gelap di belakang headline hero sering lebih murah daripada memaksakan putih di atas gradasi cerah.

Gradasi CSS statis jarang menjadi bottleneck dibanding foto hero 2 MB. Meski demikian, banyak lapisan radial besar plus animasi panjang menambah biaya paint—ukur di DevTools Performance bila section full-viewport bergerak. Visual artwork kompleks kadang tetap lebih efisien sebagai WebP/AVIF teroptimasi.

Akhirnya, fallback syntax modern:

.hero {
  background: linear-gradient(90deg, #2563eb, #ec4899);
}

@supports (background: linear-gradient(90deg in oklch, red, blue)) {
  .hero {
    background: linear-gradient(
      90deg in oklch,
      oklch(65% 0.22 250),
      oklch(70% 0.20 25)
    );
  }
}

Kapan Gradient Tepat Digunakan di Web Design

Gradasi membantu depth hero, accent brand dua warna, atau pemisah visual halus antar section—selaras tren gaya desain website modern. Kurangi pemakaian bila CTA hilang di tengah rainbow, teks body kehilangan kontras, atau motion dekoratif mengganggu fokus.

Sedangkan transisi section melengkung kadang lebih tepat lewat SVG wave daripada gradasi full-bleed. Artikel shape divider SVG wave membahas alat untuk tepi section, bukan menggantikan panduan gradasi ini.

Akhirnya, layout premium sering mengombinasikan gradasi halus dengan grid tipografi ketat—referensi visual ada di contoh layout website modern, tanpa mewajibkan palet yang sama.

Background Gradient Maker dan Gradient Generator

Query gradient generator atau background gradient maker sering mengarah ke editor visual. Itu wajar, karena kode yang di-copy tetap memakai fungsi yang sama dengan tutorial di atas. Sepuluh referensi berikut kami kelompokkan: generator CSS klasik, lalu mesh bila Anda butuh efek cair tanpa Photoshop.

Jadi untuk setiap tool: cocok untuk apa, jenis export, dan keunggulan yang bisa Anda cek langsung di halamannya (UI berubah; jangan mengandalkan ingatan).

cssgradient.io — Background Gradient Maker

CSS Gradient di cssgradient.io menawarkan generator gradasi gratis untuk background website, blog, atau profil media sosial. Output utama: snippet background linear/radial siap tempel. Ternyata preview langsung di browser dan alur tanpa akun cukup bila Anda butuh background gradient cepat lalu menyunting stop di VS Code.

Gradient Generator Josh W. Comeau

Generator di blog Josh W. Comeau hidup di situs tutorial front-end yang sama. Di samping snippet CSS, halaman menjelaskan mengapa transisi antar warna terasa “kotor” di sRGB dan bagaimana interpolation memengaruhi hasil. Export tetap berupa CSS; nilai tambahnya konteks edukatif di samping slider—berguna bila tim desain protes gradasi terlihat pucat.

Gradient Generator — Learn UI Design

Tool Learn UI Design membuat linear, radial, dan conic dalam satu antarmuka. Maka export CSS atau SVG dalam satu klik—praktis bila Anda ingin path SVG untuk asset statis sekaligus fallback CSS. Conic di sini membantu mockup ring dekoratif tanpa menulis ulang syntax dari nol.

ColorZilla Gradient Editor

ColorZilla Gradient Editor menawarkan antarmuka mirip editor grafis (stop, opacity, preset). Output: CSS filter legacy dan background modern tergantung mode yang Anda pilih. Jadi cocok untuk developer yang terbiasa workflow Photoshop: drag stop, copy, paste ke stylesheet tema WordPress.

gradient.style

gradient.style fokus builder gradasi dengan dukungan wide-gamut/HDR selaras standar CSS Color 4—selaras pembahasan in oklch di artikel ini. Export berupa CSS dengan color space eksplisit. Pakai bila Anda sudah punya fallback sRGB dan ingin eksperimen gradasi lebih hidup di monitor P3.

ColorSpace Gradient Color Generator

ColorSpace gradient menerima dua warna (brand primary/secondary), lalu menghasilkan kombinasi gradasi plus kode CSS. Walau hex brand sudah ada, pasangan stop kerap masih perlu dicoba. Export: CSS siap pakai; Anda tetap perlu menyesuaikan arah (deg) ke layout hero.

Mesher — CSS Hero

Mesher adalah generator mesh gradient gratis berbasis CSS murni—warna pilihan sendiri atau palette acak. Output: beberapa lapisan radial-gradient yang Anda tumpuk (mirip contoh layered hero di atas). Keunggulan: tanpa WebGL, tetap bisa disalin ke stylesheet; trade-off: file CSS lebih panjang dan lebih sensitif terhadap ukuran viewport.

Mesh Gradient Generator — MagicPattern

MagicPattern mesh gradients menarget efek liquid dengan warna ter-warp. Export SVG, PNG, atau JPG; situs menyatakan workflow tanpa wajib daftar untuk ekspor dasar (cek ulang saat dipakai). Cocok untuk mockup marketing atau Open Graph image; untuk komponen UI harian, pertimbangkan berat asset raster versus CSS murni.

MESH (meshgradient.com)

MESH memakai shader WebGL: klik menambah titik kontrol, drag membelokkan efek gradasi. Output biasanya gambar atau kode yang perlu Anda adaptasi—bukan pengganti satu baris linear-gradient. Berguna saat desainer ingin kontrol kurva bebas; developer menerjemahkan hasil ke CSS layered atau export PNG/WebP teroptimasi.

uiGradients

uiGradients mengumpulkan pasangan gradasi untuk UI dengan tombol salin CSS. Halaman berbasis JavaScript; bila preview kosong di crawler atau reader mode, buka di browser biasa. Perannya inspirasi background gradient siap tempel, bukan editor stop lengkap—gabungkan dengan ColorZilla atau cssgradient.io bila perlu fine-tune.

Setelah tool dipilih, workflow yang stabil: tentukan dulu linear/radial/conic di kode, baru buka background gradient maker untuk mempercepat hex dan stop; mesh generator reserved untuk hero landing atau kampanye iklan. Jangan reverse urutan itu—tim maintenance sulit membaca CSS mesh tanpa komentar lapisan.

Background Pattern sebagai Pelengkap

Apabila Anda butuh pola geometris berulang, bukan transisi warna mulus, gabungkan repeating gradient dengan SVG pattern (Hero Patterns, CSS3 Patterns Gallery Lea Verou) atau arahkan ke artikel pattern dedicated agar tidak cannibal dengan panduan gradasi ini. Keduanya bisa Anda tumpuk lewat multiple background.

FAQ CSS Gradient

Apa itu css gradient? Fungsi CSS yang menghasilkan gambar gradasi warna tanpa file PNG/JPG terpisah untuk efek sederhana.

Bagaimana membuat background gradient? background: linear-gradient(to bottom, #2563eb, #7c3aed);

Linear vs radial vs conic? Linear sepanjang garis; radial dari pusat; conic mengelilingi sudut.

Text gradient css? Gradient pada background, lalu background-clip: text dan color: transparent.

Kenapa background-color: linear-gradient(...) gagal? Gradient bukan tipe <color>.

Gradient vs gambar foto? Tergantung kompleksitas visual, ukuran file, dan kebutuhan responsif—tidak ada pemenang universal.

Background gradient maker yang recommended? Mulai dari cssgradient.io atau ColorZilla bila butuh editor stop; gradient.style bila sudah memakai OKLCH; uiGradients bila hanya butuh inspirasi cepat.

Setelah hero gradient stabil, uji tampilan di viewport sempit: stop yang terlihat halus di desktop kadang terlalu kontras di layar OLED kecil—sesuaikan stop atau tambahkan overlay tipis sebelum deploy.