Generator Gradient CSS

Tentang gradien CSS

Gradien CSS memungkinkan Anda menampilkan transisi halus antara dua warna atau lebih, tanpa menggunakan gambar. Mereka dihasilkan oleh browser, yang berarti mereka beradaptasi dengan sempurna ke resolusi apa pun dan tidak menambah berat ke pemuatan halaman. Gradien didefinisikan melalui properti background dengan fungsi linear-gradient() atau radial-gradient().

Sejarah Singkat Gradien CSS

Gradien CSS didefinisikan dalam CSS Image Values and Replaced Content Module Level 3, dipelihara oleh W3C CSS Working Group dan diedit oleh Tab Atkins Jr. dan Elika J. Etemad antara lain. First Public Working Draft adalah 12 Juli 2011; spec mencapai Candidate Recommendation pada 17 April 2012, mengunci sintaks modern tanpa awalan, termasuk konvensi bahwa 0deg mengarah ke atas (ke atas) dan to right sama dengan 90deg. Urutan pengiriman browser: WebKit adalah yang pertama dengan margin lebar, dengan -webkit-gradient() dapat digunakan di Safari 4 (2009) menggunakan sintaks berat panggilan fungsi. Firefox mengirimkan -moz-linear-gradient() di Firefox 3.6 pada 21 Januari 2010; Internet Explorer 10 mengirimkan bentuk tanpa awalan pada 2012; sintaks tanpa awalan stabil di semua mesin utama pada akhir 2013. conic-gradient() ditentukan kemudian di CSS Images Level 4, Lea Verou menyusun proposal pada 2011, Tab Atkins menambahkannya ke spec pada 2012, dan pengiriman native tiba di Chrome 69 (4 September 2018), Safari 12.1 (25 Maret 2019) dan Firefox 83 (17 November 2020). Pada 2026 Anda dapat menulis background: linear-gradient(...) dan background: radial-gradient(...) dengan percaya diri tanpa awalan dan tanpa fallback untuk browser apa pun yang layak didukung.

linear-gradient: Sudut, Sisi, dan Kehalusan Diagonal

Tata bahasa formal adalah linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). Konvensi sudut sering membuat developer tersandung karena berbeda dari konvensi SVG/canvas. 0deg sama dengan to top, garis gradien mengarah ke atas, sehingga warna terakhir muncul di atas. 90deg sama dengan to right. 180deg sama dengan to bottom (default jika tidak ada arah yang diberikan). 270deg sama dengan to left. 135deg adalah diagonal kanonik, kiri-atas ke kanan-bawah, arah gradien paling umum dalam desain web modern. Sudut yang meningkat berputar searah jarum jam dari atas, berlawanan dengan konvensi matematika (di mana 0 adalah kanan dan sudut meningkat berlawanan arah jarum jam) dan berlawanan dengan <linearGradient> SVG. Kehalusan yang berguna: to right dan 90deg setara hanya pada kotak persegi. Pada kotak non-persegi, to top right menghasilkan garis gradien yang persis tegak lurus dengan diagonal dari sudut kiri-bawah, yang berarti gradien mengenai sudut dengan bersih, sedangkan 45deg selalu literal 45 derajat terlepas dari rasio aspek. Untuk sebagian besar latar belakang hero, perbedaan ini tidak penting; untuk desain yang sangat selaras, mungkin penting.

radial-gradient: Bentuk, Ukuran dan Posisi

Tata bahasanya adalah radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Dua nilai bentuk: circle (lingkaran sempurna diskalakan ke kotak) dan ellipse (default, diregangkan ke rasio aspek kotak). Ukuran dapat berupa salah satu dari empat kata kunci extent atau panjang/persentase eksplisit. closest-side: bentuk akhir menyentuh sisi terdekat. closest-corner: bentuk akhir melewati sudut terdekat dengan tepat. farthest-side: bentuk akhir menyentuh sisi terjauh. farthest-corner (default): bentuk akhir melewati sudut terjauh. Klausa at <position> memindahkan pusat, at top left, at 30% 70%, dll. Pusat default adalah at center center. Gradien radial adalah cara Anda membuat efek spotlight, glow lembut, latar belakang "vignette" di mana tepi gelap menuju hitam, dan latar belakang badge melingkar. Mereka jauh lebih jarang daripada gradien linear dalam penggunaan produksi 2026, sebagian besar latar belakang "gradien" yang Anda lihat di halaman landing adalah linear, tetapi mereka sangat diperlukan untuk kasus di mana linear tidak dapat menjangkau.

Color Stop, Inti dari Gradien

Color stop adalah nilai warna dengan posisi opsional di sepanjang garis gradien. linear-gradient(red, blue) menempatkan merah pada 0% dan biru pada 100%, dengan interpolasi halus di antara. linear-gradient(red 0%, yellow 50%, blue 100%) menambahkan stop kuning di tengah. Stop dengan posisi eksplisit dapat ditempatkan di mana saja dari 0% hingga 100%, dan stop tanpa posisi eksplisit didistribusikan secara merata di antara tetangga posisi-eksplisit mereka. Hard color stops, dua stop pada posisi yang sama, seperti linear-gradient(red 50%, blue 50%), menghasilkan transisi instan daripada perpaduan halus. Ini adalah trik di balik setiap pola CSS: garis, papan catur, titik, semua dibangun dari tumpukan gradien dengan hard stop. Color interpolation hints (CSS Images Level 4): memasukkan persentase polos antara dua stop bias di mana titik tengah interpolasi jatuh. linear-gradient(red, 25%, blue) menggeser titik tengah persepsi ke 25% daripada default 50%, berguna untuk secara halus membobot satu warna di atas yang lain. Interpolasi ruang warna modern (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) menginterpolasi di ruang warna Oklab yang seragam secara persepsi daripada sRGB gamma-encoded, menghasilkan transisi yang lebih halus melalui tengah tanpa "zona mati" abu-abu yang dihasilkan oleh interpolasi sRGB antara warna komplementer chroma tinggi. Default masih in oklab (atau in srgb di browser yang lebih tua), untuk gradien yang dibuat dengan tangan Anda dapat memilih.

Ruang Warna Modern, Mengapa Gradien oklch Terlihat Lebih Baik

Selama dua dekade, setiap gradien CSS menginterpolasi nilai warna di sRGB, ruang warna gamma-encoded yang membesarkan web. Interpolasi sRGB memiliki mode kegagalan yang terkenal: gradien antara warna komplementer chroma tinggi (merah ↔ hijau, biru ↔ kuning, magenta ↔ cyan) melewati titik tengah abu-abu yang keruh. Coba linear-gradient(red, green) di sRGB dan bagian tengah adalah cokelat, bukan zaitun cerah yang diharapkan mata Anda. Oklab (Björn Ottosson, Desember 2020) adalah ruang warna seragam secara persepsi yang dirancang khusus untuk memperbaiki ini. OKLCH adalah bentuk silinder Oklab, tiga koordinatnya adalah Kecerahan (0-100%), Chroma (0+), dan Hue (0-360°). Gradien di OKLCH tetap halus secara persepsi di seluruh transisi, dengan kecerahan meningkat secara merata dan hue berputar dapat diprediksi melalui roda warna. Spesifikasi CSS Color Module 4 menambahkan <color-interpolation-method> sebagai parameter untuk fungsi gradien: linear-gradient(in oklch, red, blue). Dukungan browser mencapai baseline pada pertengahan hingga akhir 2023 (Safari 16.4 Maret 2023, Chrome 111 Maret 2023, Firefox 113 Mei 2023). Untuk gradien yang digunakan dalam sistem desain produksi, opsi OKLCH semakin menjadi pilihan yang tepat; generator ini saat ini mengeluarkan gradien default-sRGB dan toggle OKLCH ada di roadmap.

Performa, Gradien Murah, tetapi Tidak Gratis

Gradien CSS dipercepat GPU di setiap browser modern, yang membuatnya jauh lebih cepat daripada gambar bitmap berubin untuk sebagian besar use case, tidak ada permintaan HTTP, tidak ada decode, independen-resolusi vektor, segera dapat direwarna melalui variabel CSS. Trade-off yang perlu diketahui: biaya paint berskala dengan piksel yang disentuh dan kompleksitas gradien; gradien adalah salah satu hal yang lebih mahal yang dapat dicat browser, dan menumpuk banyak lapisan gradien di seluruh hero viewport penuh dapat menghabiskan frame pada GPU low-end. Menganimasikan warna gradien memicu repaint penuh setiap frame, jauh lebih mahal daripada menganimasikan transform atau opacity. Perbaikan modern adalah menggunakan properti kustom terdaftar @property (Houdini Properties and Values API), yang memungkinkan browser menginterpolasi nilai warna di thread compositor alih-alih thread utama; didukung di Chrome 78+ (Nov 2019), Safari 16.4+ (Mar 2023), Firefox 128+ (Jul 2024). Alternatif tradisional yang lebih murah adalah menganimasikan background-position pada gradien tetap, animasi compositor-saja sejati yang berjalan pada 60fps di mana saja. Heuristik performa umum: jika halaman Anda memiliki gradien statis tunggal, Anda tidak akan pernah memperhatikan; jika Anda menumpuk lima lapisan gradien beranimasi di setiap kartu dalam daftar panjang, profilkan sebelum mengirim.

Di Mana Gradien Mendapatkan Tempatnya

• Latar belakang bagian hero. Gradien warna-merek lembut di balik judul halaman, sering dengan overlay radial halus untuk kedalaman atmosfer. Stripe, Linear dan sebagian besar halaman landing SaaS modern bersandar pada ini.
• Styling tombol. Gradien halus pada tombol CTA primer menambah kedalaman taktil yang tidak dimiliki warna solid datar. Tambahkan gradien hover-state yang sedikit lebih gelap dan tombol terasa hidup.
• Overlay gambar untuk keterbacaan teks. Gradien linear vertikal yang memudar dari transparan di atas ke gelap di bawah, dilapisi di atas gambar hero dengan teks putih di zona gelap, membuat teks terbaca terlepas dari seperti apa foto itu.
• Latar belakang kartu. Gradien halus pada latar belakang kartu menambah kedalaman tanpa box-shadow yang berat.
• Skeleton loading dan indikator progres. Skeleton shimmer klasik adalah gradien linear dengan putih semi-transparan bergerak melintasi latar belakang abu-abu, dianimasikan melalui background-position.
• Glassmorphism dan styling UI modern. Efek frosted-glass yang dipopulerkan oleh macOS Big Sur dan iOS, latar belakang semi-transparan dengan backdrop-filter blur, sering dilapisi dengan gradien halus untuk efek sorotan.
• Mirip gradien mesh. Gradien mesh CSS yang sebenarnya belum standar (CSS Images Level 5 akhirnya akan menambahkannya), tetapi menumpuk 3-5 gradien radial besar dengan warna semi-transparan menghasilkan efek gradien mesh yang meyakinkan hari ini.

Lingkup Jujur: Apa yang Dilakukan dan Tidak Dilakukan Generator Ini

Alat ini menghasilkan gradien CSS linear dan radial dengan preview langsung, sudut yang dapat dikonfigurasi (untuk linear) atau posisi (untuk radial), dan sejumlah color stop dengan posisi. Mengeluarkan sintaks modern tanpa awalan. Apa yang tidak dilakukan alat ini saat ini, yang ditangani generator yang lebih rumit: gradien konik (variasi berputar-di-sekitar-pusat, digunakan untuk diagram lingkaran, sunburst dan roda warna), lihat CSS Pattern Generator Absolutool untuk beberapa contoh pola konik; gradien berulang (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) untuk isian gaya garis dan pola, juga ditangani di CSS Pattern Generator; toggle interpolasi OKLCH / Oklab (ruang warna modern seragam secara persepsi), saat ini mengeluarkan default-sRGB; sintaks color hint untuk membobot titik tengah antara stop; keyframe animasi multi-stop. Untuk sebagian besar gradien produksi (latar belakang hero, gaya tombol, efek overlay), linear + radial mencakup use case; untuk kasus yang lebih eksotis, CSS Pattern Generator adalah alat pelengkap yang tepat.

Pertanyaan umum

Apakah gradien CSS didukung oleh semua browser?

Ya. Gradien CSS didukung oleh semua browser utama sejak 2013, dengan cakupan lebih dari 98% di seluruh dunia. Anda tidak lagi memerlukan prefiks vendor seperti -webkit- untuk penggunaan modern.

Sudut apa yang harus digunakan untuk gradien diagonal?

135 derajat membuat diagonal kiri-atas ke kanan-bawah, yang paling umum. 45 derajat dimulai dari kiri-bawah ke kanan-atas. 90 derajat berjalan dari kiri ke kanan, dan 180 derajat dari atas ke bawah.

Bisakah saya menggunakan lebih dari dua warna?

Tentu saja. Klik "Tambah stop" untuk menambahkan hingga 8 color stop. Anda dapat mengontrol setiap warna dan posisinya sepanjang gradien. Gradien multi-stop menciptakan efek visual yang lebih kaya dan dinamis.

Mengapa tidak ada opsi gradien konik?

Gradien konik (variasi berputar-di-sekitar-pusat, digunakan untuk diagram lingkaran, sunburst dan roda warna) adalah masalah desain yang berbeda dari gradien linear dan radial, parameternya adalah sudut di sekitar pusat daripada posisi di sepanjang garis. Untuk contoh dan pola conic-gradient, gunakan CSS Pattern Generator Absolutool, yang menangani kasus yang lebih eksotis (konik, repeating-linear, repeating-conic) untuk isian gaya pola. Generator ini berfokus pada kasus linear+radial yang mencakup sebagian besar gradien hero-dan-tombol produksi.

Apakah gradien CSS lebih cepat dari latar belakang gambar?

Untuk sebagian besar kasus, ya, gradien CSS menghilangkan permintaan HTTP, langkah decode, dan pengiriman aset multi-resolusi yang diperlukan untuk tampilan retina. Gradien juga sempurna vektor pada zoom apa pun dan dapat direwarna dengan mudah melalui variabel CSS. Trade-off: gradien dicat GPU tetapi biaya paint berskala dengan area piksel dan kompleksitas stop; menumpuk banyak lapisan gradien di seluruh hero viewport penuh dapat menghabiskan frame pada GPU low-end. Untuk animasi, animasikan background-position (compositor-saja, murah) daripada color stop gradien (repaint penuh, mahal). Gradien statis tunggal pada kartu atau bagian hero, tidak pernah terlihat.

Apakah data saya dikirim ke mana pun?

Tidak. Generasi berjalan sepenuhnya di browser Anda, color picker, slider sudut dan generasi kode CSS semua berjalan lokal. Tidak ada permintaan keluar saat Anda menggunakan kontrol. CSS yang dihasilkan adalah milik Anda untuk ditempel di mana saja.

Alat terkait