CSS Teks Gradient Generator

Cara penggunaan

1. Pilih warna Anda: pilih dua warna atau lebih untuk gradien menggunakan pemilih warna.
2. Atur sudut dan gaya: pilih gradien linier atau radial, sesuaikan sudutnya, dan opsional tambahkan posisi titik warna.
3. Salin CSS: kode CSS yang dihasilkan menggunakan background-clip: text dan -webkit-background-clip: text untuk efek teks gradien, salin langsung ke stylesheet Anda.

Mengapa menggunakan generator teks gradien?

Teks gradien adalah salah satu efek CSS modern paling populer untuk judul, logo, dan teks ajakan bertindak. Mendapatkannya membutuhkan kombinasi spesifik dari properti CSS (background, background-clip, -webkit-text-fill-color) yang mudah terlewatkan. Generator ini menangani sintaks lintas-peramban secara otomatis dan menyediakan pratinjau langsung untuk menyempurnakan gradien Anda sebelum menulis satu baris kode pun.

Fitur

• Beberapa titik warna: tambahkan sebanyak titik warna yang Anda butuhkan untuk efek gradien yang kompleks.
• Linier dan radial: pilih antara gradien linier terarah dan gradien radial terpusat.
• Kontrol sudut: atur sudut gradien dari 0° hingga 360° dengan dial visual.
• Pratinjau langsung: lihat teks gradien Anda diperbarui secara real-time bersama contoh Anda.
• CSS lintas-peramban: keluaran menyertakan awalan -webkit dan fallback untuk kompatibilitas maksimum.

Pertanyaan yang sering diajukan

Bagaimana cara kerja teks gradien CSS?

Teks gradien CSS bekerja dengan menerapkan gradien sebagai latar belakang elemen, lalu memotong latar belakang itu sesuai bentuk teks dengan background-clip: text, dan menjadikan warna teks transparan dengan -webkit-text-fill-color: transparent (atau color: transparent). Hanya potongan gradien berbentuk teks yang terlihat.

Apakah teks gradien berfungsi di semua peramban?

Teks gradien CSS berfungsi di semua peramban modern, Chrome, Firefox, Safari, dan Edge. Properti -webkit-background-clip: text didukung dengan baik. Selalu sediakan fallback warna solid untuk peramban yang sangat lama melalui properti color.

Bisakah saya menggunakannya pada ukuran font apa pun?

Ya. Teks gradien diskalakan dengan sempurna sesuai ukuran font, ini CSS murni, bukan gambar, jadi tetap tajam pada resolusi apa pun, termasuk layar berkepadatan tinggi.

Sejarah singkat teks bergradien di web

Teks bergradien menjadi mungkin secara visual di web dengan properti -webkit-background-clip: text WebKit, sebuah ekstensi Safari/Chromium eksperimental yang diusulkan oleh tim WebKit pada 2008 sebagai cara untuk mengisi bentuk glif teks dengan latar belakang arbitrer (gradien, gambar, apa saja). Teknik ini tetap tidak resmi selama bertahun-tahun: Firefox merilis background-clip: text tanpa prefix hanya di versi 49 (September 2016), dan CSS Backgrounds Module Level 4 meresmikannya sebagai draft kerja W3C dimulai sekitar 2018. Sintaks gradien yang mendasarinya berkembang secara terpisah. CSS Images Module Level 3 (Rekomendasi W3C 2017) menstandarisasi linear-gradient() dan radial-gradient() sebagai nilai gambar kelas satu; conic-gradient() mengikuti di Module Level 4 (Chrome 69 September 2018, Safari 12.1 Maret 2019, Firefox 83 November 2020). Kombinasi dari kedua spesifikasi ini yang memungkinkan judul gradien satu baris hari ini. Adopsi meledak di komunitas pengembang ketika Tailwind CSS merilis kelas utility bg-clip-text-nya di v1.4 (2020), membuat judul gradien menjadi primitif siap pakai. Identitas merek modern sekarang bergantung pada teks gradien sebagai tanda tangan visual: seri «Bridges» Stripe, logotype gradien Linear, halaman arahan Vercel, pemasaran WWDC Apple, dan toko template Notion semuanya menggunakan teknik ini. Pola gabungan background-clip: text + gradien secara efektif menggantikan «PNG judul bergaya» yang mendominasi desain web 2005-2015, menghapus kategori masalah aksesibilitas dan kinerja dalam satu langkah.

Anatomi teks gradien CSS

• Gradien itu sendiri. background-image: linear-gradient(90deg, #f00, #00f) mengatur latar belakang elemen ke gradien 90 derajat yang berjalan dari merah ke biru. Gradien dapat berupa linear (terarah), radial (terpusat), conic (sapuan rotasi), atau salah satu varian berulang. Gradien CSS adalah nilai gambar, bukan nilai warna, itulah yang membuatnya dapat dipotong ke bentuk teks.
• background-clip: text. Memberi tahu browser untuk merender latar belakang hanya di dalam geometri glif yang dirender. Tanpa properti tunggal ini, gradien mengisi seluruh kotak elemen; dengannya, gradien dibatasi pada garis besar teks. Awalnya merupakan ekstensi WebKit dengan prefix sebagai -webkit-background-clip: text, sekarang juga tanpa prefix di Firefox 49+ (2016) dan browser berbasis Chromium.
• color: transparent atau -webkit-text-fill-color: transparent. Setelah latar belakang dipotong ke teks, hasil yang terlihat masih tergantung pada warna apa yang dilukis teks itu sendiri di atas latar belakang. Mengatur color: transparent (atau -webkit-text-fill-color: transparent dengan prefix) membiarkan gradien terlihat. Tanpa ini, warna teks solid akan dengan mudah melukis di atas gradien yang dipotong.
• Rantai prefix -webkit-. Safari, platform dengan sejarah prefix yang paling terakumulasi, masih mengurai properti tanpa prefix tetapi versi dengan prefix tetap dalam kode produksi karena alasan warisan. Output dari generator ini mencakup baik background-clip: text maupun -webkit-background-clip: text sehingga teknik tersebut bekerja kembali ke Safari 14 dan browser berbasis WebKit warisan apa pun.
• Jenis gradien dan pemberhentian. linear-gradient(angle, color1, color2, ...) berjalan ke suatu arah; radial-gradient(shape at position, ...) berasal dari sebuah titik; conic-gradient(from angle at position, ...) menyapu sekeliling seperti jarum jam. Masing-masing menerima jumlah pemberhentian warna yang sewenang-wenang, dengan posisi eksplisit (red 0%, blue 50%, green 100%) untuk kontrol halus atas di mana setiap warna mulai dan berakhir.

Pola penggunaan teks gradien dunia nyata

• Judul identitas merek. Seri «Bridges» Stripe, hero produk Linear, banner «Develop. Preview. Ship.» Vercel semuanya menggunakan teks gradien sebagai tanda tangan merek. Wordmark satu warna terasa kuno untuk SaaS tahap awal, sementara judul gradien membawa isyarat visual «dibangun pada 2024».
• Judul bagian hero. H1 di halaman arahan sering kali merupakan satu-satunya elemen teks dengan anggaran desain tertinggi. Teks gradien memberinya bobot visual tanpa harus menggunakan file font khusus, SVG, atau gambar hero, yang semuanya menambah bobot halaman dan masalah aksesibilitas.
• Halaman metrik angka besar. Halaman harga («$0 untuk memulai»), sebutan statistik («10× lebih cepat»), dan ringkasan dashboard menggunakan teks gradien untuk menarik mata ke angka itu sendiri. Gradien secara efektif menggantikan pola «lingkaran berwarna di belakang angka» dari desain yang lebih tua.
• Tombol call-to-action. Gradien halus pada teks CTA (bukan latar belakang tombol) terasa lebih halus daripada warna solid dan cocok dengan permukaan tombol glassmorphism atau neumorphic. Teknik ini umum di merek fintech dan alat desain.
• Sorotan navigasi. Status aktif atau hover pada tautan navigasi dapat menggunakan teks gradien untuk memberikan umpan balik visual tanpa menambahkan garis bawah atau perubahan warna latar belakang. Pola ini banyak digunakan di situs dokumentasi (Stripe Docs, Tailwind Docs).
• Mode gelap dan desain brand-bridge. Teks gradien bekerja sangat baik di latar belakang gelap karena warna jenuh muncul tanpa bersaing dengan permukaan terang yang sibuk. Banyak produk mempertahankan judul satu warna di mode terang dan beralih ke gradien di mode gelap (menggunakan pertukaran variabel CSS).
• Sebutan produk e-commerce. Lencana «Diskon», «Baru», «Edisi Terbatas» dan subjudul produk menggunakan teks gradien untuk membedakan diri dari teks tubuh tanpa memerlukan aset ikon. Editor etalase Shopify menampilkan teks gradien sebagai opsi bawaan di 2024.

Pertimbangan aksesibilitas

• WCAG 2.1 SC 1.4.3 Kontras (Minimum). Kriteria keberhasilan membutuhkan setidaknya kontras 4,5:1 antara teks dan latar belakang untuk teks normal (3:1 untuk teks besar, didefinisikan sebagai 18pt+ atau 14pt tebal). Teks gradien lebih sulit untuk dievaluasi karena rasio kontras bervariasi di sepanjang gradien. Pendekatan aman: pastikan warna paling terang dari gradien Anda masih memenuhi rasio terhadap latar belakang. Alat seperti WebAIM Contrast Checker dan Stark di Figma dapat membantu.
• Pilih warna gradien yang paling gelap terlebih dahulu. Saat memasangkan gradien dengan latar belakang terang, memilih warna paling terang gradien untuk melewati rasio 4,5:1 menjamin bahwa sisa gradien juga dapat diakses. Hal yang sama berlaku sebaliknya di latar belakang gelap. WCAG 2.2 (rekomendasi Oktober 2023) memperketat pedoman presentasi visual, termasuk kasus di mana kontras teks bervariasi di sepanjang larik.
• Pembaca layar melihat teks tidak berubah. Karena gradien adalah gaya visual murni (background-clip, color), teknologi bantu membaca konten teks yang dirender terlepas dari bagaimana warnanya. Tidak ada kekhawatiran «teks alternatif» dengan teks gradien, tidak seperti teks gambar yang diraster atau SVG-teks-tanpa-elemen-teks.
• prefers-reduced-motion. Gradien beranimasi (transisi background-position, animasi siklus warna) harus dibungkus dalam @media (prefers-reduced-motion: no-preference) sehingga pengguna dengan gangguan vestibular atau sensitivitas gerakan melihat gradien statis. CSS Working Group menambahkan media query pada 2017; dukungan browser telah universal sejak 2020.
• Zoom browser dan ubah ukuran teks. WCAG 2.1 SC 1.4.4 mengharuskan teks dapat diubah ukurannya hingga 200% tanpa kehilangan konten. Teks gradien skala dengan sempurna karena murni dirender CSS (tidak ada rasterisasi). Pengguna dengan penglihatan rendah yang menggunakan zoom Ctrl+/Cmd+ akan melihat gradien tetap tajam pada tingkat zoom apa pun.
• Lembar gaya cetak. Sebagian besar browser menghapus warna yang dipotong latar belakang saat mencetak karena halaman cetak mengharapkan tinta di atas kertas, dan latar belakang gradien menghilang. Selalu berikan override @media print yang mengatur color solid pada teks gradien sehingga salinan cetak tetap dapat dibaca. Banyak desainer melupakan ini; mencetak judul gradien sering menghasilkan teks tak terlihat.
• Rantai warna fallback. Selalu atur properti color solid terlebih dahulu, lalu tambahkan color: transparent (atau -webkit-text-fill-color: transparent) sehingga browser tanpa dukungan background-clip: text (IE warisan, browser Android sangat lama) tetap melihat teks warna solid daripada teks tak terlihat. Output generator mencakup fallback ini secara default.

Pertanyaan yang sering diajukan lainnya

Mengapa teks gradien dianggap sebagai tanda tangan merek modern?

Dua alasan. Pertama, alasan teknis: teks gradien menjadi sepenuhnya lintas-browser hanya sekitar 2017-2020, sehingga desain yang menggunakannya secara terlihat membawa isyarat visual «dibangun baru-baru ini», dengan cara yang sama bahwa flat design mengatakan «2013» atau skeuomorphism mengatakan «2010». Kedua, alasan budaya: Stripe, Linear, Vercel, dan Apple WWDC mempopulerkan teks gradien sebagai elemen identitas merek dalam gelombang pemasaran fintech dan alat pengembang 2020-2024. Mengadopsi bahasa visual yang sama menandakan keanggotaan dalam garis keturunan desain itu.

Bagaimana cara menganimasikan efek teks gradien?

Teknik paling umum menganimasikan background-position pada gradien yang berukuran besar. Atur background-size: 200% 200% dan animasi background-position dari 0% 0% ke 100% 100% pada loop 3-5 detik. Selalu bungkus keyframe dalam @media (prefers-reduced-motion: no-preference) sehingga pengguna dengan sensitivitas gerakan melihat versi statis. Hindari menganimasikan pemberhentian warna individu secara langsung: CSS saat ini tidak menginterpolasi antara nilai gradien dengan mulus di seluruh browser, meskipun CSS @property (Rekomendasi Kandidat W3C 2022) mulai mengaktifkan ini.

Bisakah mesin pencari dan pembaca layar melihat teks gradien?

Ya. Teks gradien adalah teks HTML murni yang digaya dengan CSS; DOM masih berisi karakter sebenarnya. Google, Bing, pembaca layar (NVDA, JAWS, VoiceOver), dan alat ekstraksi teks apa pun membaca konten persis seolah-olah itu adalah teks warna solid biasa. Ini adalah salah satu alasan utama teks CSS gradien menggantikan pola lama «PNG judul bergaya»: gambar tersebut tidak terlihat untuk pencarian dan pembaca layar tanpa teks alternatif manual.

Apakah teks gradien berfungsi di email HTML?

Sebagian besar tidak. Outlook desktop (mesin rendering Word) menghapus background-clip; klien web Gmail mendukungnya dengan tidak konsisten; Apple Mail dan klien Gmail mobile modern biasanya merendernya dengan benar. Untuk kampanye email, pendekatan yang lebih aman adalah mengirimkan judul warna solid fallback dan memperlakukan teks gradien sebagai «peningkatan progresif» untuk klien yang mendukungnya. Beberapa tim mengomposisi judul terlebih dahulu sebagai PNG/SVG dengan teks alternatif dan menerima trade-off aksesibilitas.

Warna apa yang paling baik bekerja bersama dalam gradien teks?

Tiga pola mendominasi. Analog (warna bersebelahan pada roda, mis. biru → ungu → merah muda) memberikan hasil yang mulus, ramah merek, dan merupakan default untuk sebagian besar sistem desain modern. Komplementer (berlawanan pada roda, mis. biru → oranye) menciptakan kontras yang kuat tetapi bisa terlihat mencolok dalam teks panjang. Bernuansa-merek (warna merek utama Anda dengan variasi luminositas/saturasi halus) menghasilkan efek canggih yang terasa terintegrasi daripada dekoratif. Hindari mencampur lebih dari tiga warna dalam satu judul; gradien kompleks sebaiknya disisihkan untuk ikon dan elemen grafis.