Kenapa teks gradien saya tidak terlihat sama sekali?

Karena warna teks dibuat transparan, sementara properti pemotongan latarnya tidak berlaku — sehingga tidak ada apa pun yang tergambar. Pastikan properti background-clip beserta awalan -webkit- keduanya ada, dan selalu tulis warna solid sebagai cadangan sebelum properti gradiennya.

Apakah teks gradien aman untuk aksesibilitas?

Aman hanya jika titik terlemah gradiennya masih memenuhi ambang kontras, karena keterbacaan ditentukan oleh huruf terburuk, bukan rata-ratanya. Batasi penggunaannya pada judul pendek, dan hindari untuk teks isi yang panjang di mana pembaca menghabiskan waktu paling banyak.

Apakah teks gradien tetap bisa dipilih dan dicari?

Bisa, karena teknik ini hanya mengubah cara teks digambar, bukan menggantinya dengan gambar. Teksnya tetap teks sungguhan yang bisa disalin, dibaca pembaca layar, dan diindeks mesin pencari.

Warna

Generator Teks Gradien

Atur warna dan sudutnya untuk melihat pratinjau langsung, lalu salin CSS-nya beserta warna cadangan.

Teks pratinjau

Warna awal Warna tengah Warna akhir Sudut

Pakai warna tengah Latar gelap

EnSaveNet

CSS

Apa ini

Generator teks gradien menyusun potongan CSS yang membuat huruf terisi gradien alih-alih satu warna solid. Caranya bukan mewarnai teks secara langsung: gradien dipasang sebagai latar elemen, lalu latar itu dipotong mengikuti bentuk huruf dan warna tulisannya dibuat transparan. Karena teknik ini bergantung pada dua properti yang saling terkait, melewatkan salah satunya menghasilkan teks yang hilang sama sekali — dan itulah kegagalan yang paling sering terjadi.

Cara kerja

Karena warna teks dibuat transparan, teks akan benar-benar tidak terlihat jika pemotongan latar tidak berjalan. Warna cadangan karena itu bukan pelengkap, melainkan pengaman: tulis warna solid terlebih dahulu, baru properti gradiennya, sehingga browser yang tidak mendukung tetap menampilkan teks dengan warna biasa.

Teks bergradien juga menurunkan kontras secara tidak merata — sebagian huruf bisa lulus ambang kontras sementara sebagian lain gagal, tergantung di mana huruf itu jatuh pada gradien. Karena itu teknik ini cocok untuk judul pendek dan buruk untuk teks isi. Alat ini menampilkan rasio kontras terendah di sepanjang gradien, bukan rata-ratanya, karena huruf terburuklah yang menentukan keterbacaan.

Cara pakai

Pilih dua warna atau lebih Atur warna awal dan akhir, dan tambahkan warna tengah jika perlu.
Atur sudut dan lihat pratinjaunya Pratinjau memakai teksmu sendiri, sehingga hasilnya terlihat pada kata yang benar-benar dipakai.
Salin CSS-nya Snippet yang dihasilkan sudah memuat warna cadangan di baris pertama.

Pertanyaan umum

Kenapa teks gradien saya tidak terlihat sama sekali?: Karena warna teks dibuat transparan, sementara properti pemotongan latarnya tidak berlaku — sehingga tidak ada apa pun yang tergambar. Pastikan properti background-clip beserta awalan -webkit- keduanya ada, dan selalu tulis warna solid sebagai cadangan sebelum properti gradiennya.
Apakah teks gradien aman untuk aksesibilitas?: Aman hanya jika titik terlemah gradiennya masih memenuhi ambang kontras, karena keterbacaan ditentukan oleh huruf terburuk, bukan rata-ratanya. Batasi penggunaannya pada judul pendek, dan hindari untuk teks isi yang panjang di mana pembaca menghabiskan waktu paling banyak.
Apakah teks gradien tetap bisa dipilih dan dicari?: Bisa, karena teknik ini hanya mengubah cara teks digambar, bukan menggantinya dengan gambar. Teksnya tetap teks sungguhan yang bisa disalin, dibaca pembaca layar, dan diindeks mesin pencari.

Catatan

Snippet disusun di browser-mu dan tidak dikirim ke mana pun.