Generator CSS Teks Gradien
Hasilkan CSS untuk teks gradien — gradien linear atau radial yang dipotong ke huruf melalui background-clip: text (dengan awalan -webkit-) dan isian transparan. Salin kelas siap pakai atau cuplikan inline.
Input
Ditampilkan di pratinjau dan cuplikan HTML. Kelas CSS tetap sama terlepas dari teks ini.
Arah gradien linear.
Output
Teks gradien Anda akan muncul di sini.
Tambahkan ini ke stylesheet Anda, lalu terapkan class="gradient-text" ke elemen Anda.
Span dengan gaya inline — tempel di mana saja, tanpa stylesheet.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/gradient-text-css-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"sampleText": "Gradient Text",
"fontSize": "72",
"fontWeight": "700",
"gradientType": "linear",
"angle": "90",
"color1": "#464aff",
"position1": "0",
"color2": "#ff6b9d",
"position2": "100",
"useColor3": "",
"color3": "#ffd93d",
"position3": "50"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `gradient-text-css-generator` tool (Gradient Text CSS Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/gradient-text-css-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator CSS Teks Gradien — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Teks gradien membuat judul yang biasa menjadi menarik dengan cara mengecat gradasi warna langsung ke huruf, bukan isian warna solid. Generator CSS Teks Gradien ini membuatkan CSS yang tepat untuk Anda: pilih warna, arah, ukuran, dan ketebalan, lihat pratinjau langsung yang diperbarui, lalu salin kelas siap pakai atau cuplikan inline mandiri.
Cara kerja teks gradien
Efek ini bergantung pada satu kombinasi properti CSS yang cerdas. Anda mengatur gradien sebagai background-image elemen, memotong latar itu mengikuti bentuk huruf dengan background-clip: text, lalu membuat isian teks transparan agar gradien tampak:
.gradient-text {
background-image: linear-gradient(90deg, #464aff 0%, #ff6b9d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}Baris -webkit-background-clip dan -webkit-text-fill-color adalah kunci dukungan browser yang luas — Chrome, Safari, dan browser WebKit/Blink lainnya memerlukan versi berawalan, dan generator ini selalu menyertakannya agar teks Anda tampil di mana saja.
Cara menggunakan generator
- Ketik teks contoh Anda untuk melihatnya di pratinjau langsung.
- Pilih jenis gradien — linear untuk sapuan lurus melintasi huruf, atau radial untuk cahaya yang menyebar dari tengah.
- Atur sudut (untuk gradien linear) untuk mengontrol arah sapuan, dari
0deg(bawah ke atas) hingga90deg(kiri ke kanan). - Tambahkan color stop. Dua warna aktif secara default; centang "Tambahkan color stop ketiga" untuk campuran multi-warna yang lebih kaya. Setiap stop memiliki posisi dari 0% hingga 100%.
- Sesuaikan ukuran dan ketebalan font agar cocok dengan judul yang sedang Anda gaya.
Alat ini menghasilkan dua hal: kelas CSS .gradient-text untuk dimasukkan ke stylesheet Anda, dan span HTML mandiri dengan gaya yang sudah disisipkan — berguna untuk template email, blok CMS, atau tempat apa pun yang tidak memungkinkan penambahan stylesheet.
Mengapa teks gradien saya terpotong?
Karena latar dipotong mengikuti teks, elemen memerlukan display: inline-block (atau block) agar pemotongan berukuran benar — generator ini menambahkannya secara otomatis. Jika bagian bawah huruf (descender) terpotong, tambahkan sedikit line-height atau padding pada elemen.
Apakah teks gradien ramah aksesibilitas?
Gradien dapat menurunkan kontras, jadi pastikan warna tergelap dalam campuran tetap terbaca di atas latar belakang Anda, dan simpan efek ini untuk judul besar, bukan teks isi. Pembaca layar membaca teks dasar secara normal, jadi tidak ada kerugian secara semantik.
Apakah ini mengirim teks saya ke mana pun?
Tidak. CSS dihasilkan sepenuhnya di browser Anda — tidak ada yang diunggah, dan alat ini berfungsi offline setelah halaman dimuat.