Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Tekst Gradient CSS

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Sample Text

Teks

Font Size (px)

Font Weight

Jenis Gradien

Jenis

Arah

Sudut (deg)

Arah

Gunakan Sudut

Gunakan Arah

Pengaturan Radial

Bentuk

Posisi

Hentian Warna

Warna 1

Posisi 1 (%)

Warna 2

Posisi 2 (%)

Warna 3

Posisi 3 (%)

Gunakan Warna 3

Warna 4

Posisi 4 (%)

Gunakan Warna 4

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Tekst Gradient CSS

Desain efek teks yang menarik dengan gradiasi berwarna dan salin CSS siap digunakan dalam satu klik. Pilih warna Anda, pilih linear atau radial, lihat pratinjau secara langsung, lalu salin snippet ke dalam stylesheet Anda.

Cara Penggunaan

Masukkan teks sampel yang ingin Anda lihat pratinjau.
Atur ukuran dan bobot font agar sesuai dengan desain Anda.
Pilih jenis gradiasi — linear (dengan sudut atau arah yang ditentukan) atau radial (dengan bentuk dan posisi).
Pilih dua atau lebih titik warna dan sesuaikan posisinya.
Salin kelas CSS dan snippet HTML yang dihasilkan.

Fitur

Pratinjau langsung – Lihat efeknya pada teks nyata saat Anda memperbaiki warna, sudut, dan titik-titik.
Gradien linier dan radial – Pilih berdasarkan sudut, arah yang ditentukan, atau bentuk dan posisi radial.
Sampai empat titik warna – Tambahkan warna antar-warna dengan persentase yang disesuaikan.
CSS kompatibel di berbagai browser – Output mencakup kedua background-clip dan -webkit-background-clip untuk kompatibilitas luas.
Pengganti latar belakang – Beralihkan pratinjau antara pola kotak, terang, dan gelap untuk menguji kontras.
Salin atau unduh – Ambil snippet CSS dan span HTML siap dipaste.

Kapan Harus Menggunakan Teks Gradiasi?

Teks gradiasi sangat cocok untuk judul utama, halaman pemasaran, logo merek, dan bagian penekanan di mana warna solid akan terasa datar. Gunakan secara hati-hati — bobot teks besar dan judul pendek paling baik, sedangkan isi teks harus tetap solid untuk keterbacaan.

IKLAN · HAPUS?

 Tanya Jawab Umum

Bagaimana cara kerja background-clip: text?

Browser akan menggambar gambar latar belakang elemen di dalam bentuk huruf yang dihasilkan, bukan di seluruh kotak elemen. Dengan warna teks transparan, gradiasi atau gambar hanya terlihat melalui garis tepi teks, sementara bagian lain dari kotak elemen tetap kosong.
Mengapa properti -webkit-text-fill-color masih diperlukan?

Mesin berbasis WebKit dan Safari versi lama secara historis membutuhkan -webkit-text-fill-color: transparent agar huruf teks bisa transparan sehingga latar belakang yang dipotong dapat terlihat. Browser modern juga menerima warna: transparent, sehingga menyertakan keduanya meningkatkan kompatibilitas di berbagai versi dan platform.
Perbedaan antara gradiasi linear dan radial?

Gradiasi linear berpindah warna sepanjang sumbu lurus yang ditentukan oleh sudut atau kata kunci arah. Gradiasi radial berpindah dari satu titik ke luar, membentuk lingkaran atau elips, menghasilkan efek fokus atau perlahan seperti bola.
Apakah efek teks gradiasi dapat diakses?

Teks gradiasi dapat mengurangi kontras yang terasa terhadap latar belakang. Pilih titik warna dengan kontras luminansi yang cukup terhadap permukaan sekitarnya, hindari menggunakan gradiasi untuk isi teks, dan selalu berikan warna cadangan yang masuk akal jika fitur background-clip tidak didukung.