rikidaniel.
Tools

Generator Teks Gradasi

Buat efek teks gradasi dengan pratinjau langsung dan kode CSS siap salin.

Gradient Text

CSS Code

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}

Panduan Gradient Text Generator

Kapan alat ini berguna?

Teks gradien cocok untuk judul singkat atau aksen visual. Pilih warna awal dan akhir, atur arah gradien, lalu lihat hasil pada ukuran teks yang akan dipakai. Batasi penggunaan pada bagian yang memang perlu menarik perhatian agar hierarki halaman tetap jelas.

Contoh penggunaan

Coba teks Portfolio dengan dua warna yang berdekatan, lalu bandingkan sudut 90 dan 135 derajat. Salin CSS ke class judul. Pastikan elemen di halaman tetap menggunakan heading yang sesuai dengan struktur dokumen, bukan dipilih hanya karena ukuran tampilannya.

Batasan dan pemeriksaan hasil

Bagian paling terang dari gradien dapat sulit dibaca pada latar putih. Uji seluruh rentang warna di light dan dark mode, sediakan warna teks fallback, dan periksa tampilan saat pencetakan atau mode kontras tinggi. Hindari gradien untuk paragraf panjang.

Alat terkait