Teks Gradien CSS Buat teks dengan isi gradien menggunakan CSS background-clip dan text-fill-color.

🎨

Teks Gradien CSS

Buat teks dengan isi gradien menggunakan CSS background-clip dan text-fill-color.

Atur warna gradien

Pilih dua atau tiga warna untuk gradien teks dan sesuaikan sudutnya.

Sesuaikan tipografi

Setel ukuran font dan berat untuk memenuhi kebutuhan desain Anda.

Salin CSS

Pratinjau teks gradien dan salin CSS dengan properti background-clip.

Loading tool...

What Is Teks Gradien CSS?

Alat Teks Gradien CSS membuat teks menarik dengan pengisian warna gradien. Sebagai gantinya menggunakan warna teks solid, teknik ini menerapkan latar belakang gradien ke teks menggunakan properti background-clip: text yang dikombinasikan dengan -webkit-text-fill-color: transparent. Ini membuat gradien terlihat melalui karakter teks. Anda dapat mengatur dua atau tiga warna gradien, menyesuaikan sudut gradien, dan mengkustomisasi ukuran font dan beratnya. Alat ini menghasilkan semua CSS yang diperlukan termasuk awalan webkit untuk kompatibilitas browser maksimum. Teks gradien populer digunakan untuk judul, bagian hero, dan elemen merek di mana Anda ingin tipografi menonjol.

Why Use Teks Gradien CSS?

Dukungan untuk 2 atau 3 pemberhentian gradien warna
Sudut gradien yang dapat disesuaikan untuk arah mana pun
Kontrol ukuran font dan berat untuk penyempurnaan tipografi
CSS yang dihasilkan termasuk semua awalan webkit yang diperlukan

Common Use Cases

Judul Hero

Buat judul bagian hero yang menarik perhatian dengan isi gradien.

Tipografi Merek

Terapkan warna gradien merek pada elemen teks kunci untuk identitas visual.

Judul Fitur

Soroti judul fitur dengan efek teks gradien yang berwarna-warni.

Tombol Aksi Halaman Pendaratan

Buat teks panggilan untuk bertindak menonjol dengan warna gradien yang cerah.

Technical Guide

Teknik teks gradien menggunakan tiga properti CSS yang bekerja bersama. Pertama, background mengatur linear-gradien pada elemen teks. Kedua, -webkit-background-clip: text (dan standar background-clip: text) memotong latar belakang ke area konten teks saja. Ketiga, -webkit-text-fill-color: transparent (atau color: transparent) membuat warna teks transparan sehingga latar belakang gradien terlihat. Gradien dapat menggunakan fungsi gradien CSS apa pun termasuk linear-gradien, radial-gradien, atau conic-gradien. Agar efek ini berfungsi, elemen teks harus memiliki display: inline atau inline-block. Awalan webkit diperlukan untuk Safari dan versi Chrome yang lebih lama. Untuk aksesibilitas, pastikan warna gradien menyediakan kontras yang cukup terhadap latar belakang. Pembaca layar masih akan membaca teks secara normal terlepas dari efek visual.

Tips & Best Practices

1
Gunakan teks tebal dan besar untuk efek gradien yang paling berdampak
2
Pilih warna dengan kontras yang baik antara satu sama lain
3
Tambahkan warna ketiga untuk efek yang lebih kompleks, seperti pelangi
4
Uji terhadap latar belakang halaman Anda untuk memastikan keterbacaan

Related Tools

Pembuat Gradien CSS

Buat gradien linier, radial, dan konik yang indah dengan beberapa pemberhentian warna dan kontrol sudut.

🎨 CSS & Design

Pembuat Bayangan Teks CSS

Buat bayangan teks CSS dengan kontrol visual untuk offset, blur, warna, dan opasitas.

🎨 CSS & Design

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Pola SVG

Buat pola berulang berbasis SVG untuk latar belakang CSS dengan berbagai bentuk.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah teks gradien berfungsi di semua browser?

Ya, dengan awalan webkit, itu berfungsi di semua browser modern termasuk Safari, Chrome, Firefox, dan Edge.

Q Bisakah saya menggunakan lebih dari dua warna?

Ya, klik "Tambah" di bawah Warna 3 untuk menambahkan pemberhentian gradien ketiga. Anda dapat menambahkan lebih banyak warna secara manual dalam CSS.

Q Apakah teks gradien dapat diakses?

Pembaca layar akan membaca teks secara normal. Pastikan warna gradien menyediakan kontras yang cukup terhadap latar belakang halaman.

Q Mengapa teks gradien saya ditampilkan sebagai warna solid?

Pastikan ketiga properti tersebut disetel: gradien latar belakang, background-clip: text, dan text-fill-color: transparan.

Q Bisakah saya menganimasikan teks gradien?

Anda dapat menganimasikan posisi latar belakang atau ukuran latar belakang untuk membuat efek gradien yang bergerak pada teks.

About This Tool

Teks Gradien CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.