Lompat ke konten
Aback Tools Logo

Generator Dekorasi Teks

Buat nilai text-decoration CSS secara interaktif. Sesuaikan jenis garis (garis bawah, garis atas, coret), gaya (solid, ganda, titik, putus-putus, bergelombang), warna, ketebalan (1-10 px), dan offset garis bawah (0-20 px). Lihat perubahan langsung pada teks pratinjau kustom, lalu salin CSS siap produksi dengan satu klik. Delapan preset disertakan - sepenuhnya gratis, tanpa pendaftaran.

Text Decoration Generator
Build CSS text-decoration visually. Set line, style, color, thickness, and offset, then copy the production-ready CSS. Preview your text decoration instantly.

Presets

2px
1px5px10px
auto
0px10px20px
28px
400
/* Text Decoration */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #6366f1;
text-decoration-thickness: 2px;
text-underline-offset: auto;
/* Shorthand */
text-decoration: underline solid #6366f1 2px;

Mengapa memakai Generator Dekorasi Teks kami?

  • Pratinjau langsung instan: lihat perubahan dekorasi teks secara real-time saat Anda menyesuaikan gaya, warna, ketebalan, dan offset. Generator kami memperbarui pratinjau seketika, tanpa tombol yang harus ditekan. Ketik teks pratinjau Anda sendiri untuk melihat persis bagaimana dekorasinya tampil dengan konten Anda.
  • Dukungan penuh properti CSS: kendalikan setiap properti CSS text-decoration: garis (garis bawah, garis atas, coret), gaya (solid, ganda, titik, putus-putus, bergelombang), warna, ketebalan (1-10 px), dan offset garis bawah (0-20 px). Generator menghasilkan properti individual sekaligus notasi singkatnya.
  • 100 % privat - tanpa unggahan ke server: semua pembuatan CSS dekorasi teks terjadi lokal di browser Anda. Teks dan pilihan desain Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server mana pun - sepenuhnya aman untuk proyek klien dan konten proprietary.
  • Gratis & tanpa pendaftaran: hasilkan CSS dekorasi teks tanpa batas tanpa pendaftaran, langganan, maupun batas pemakaian. Generator kami sepenuhnya gratis selamanya, tanpa batasan berapa kali Anda memakainya.

Apa itu dekorasi teks CSS?

Dekorasi teks CSS menambahkan garis visual pada teks: garis bawah di bawah, garis atas di atas, dan coret di tengah. Properti singkat text-decoration mengontrol jenis garis, gaya, warna, dan ketebalan dalam satu deklarasi. CSS modern juga mendukung text-underline-offset dan text-decoration-thickness untuk kontrol presisi. Generator kami memudahkan menjelajahi properti ini secara visual dan mendapatkan CSS siap produksi.

Bagaimana Generator Dekorasi Teks kami bekerja

  1. Pilih preset atau mulai menyesuaikan: jelajahi 8 preset yang mencakup gaya dekorasi teks umum (garis bawah klasik, garis bawah ganda, bergelombang, garis atas putus-putus, coret bertitik, offset tebal, bergelombang tipis). Klik preset mana pun untuk langsung menerapkannya.
  2. Sesuaikan setiap properti: pilih garis dekorasi (garis bawah, garis atas, coret, atau tidak ada), pilih dari 5 gaya (solid, ganda, titik, putus-putus, bergelombang), pilih warna apa pun lewat pemilih warna atau preset, atur ketebalan dengan slider (1-10 px), dan tetapkan offset garis bawah (0-20 px atau auto). Ketik teks pratinjau Anda sendiri dan sesuaikan ukuran serta ketebalan font agar sesuai konteks desain Anda.
  3. Salin CSS: klik «Salin CSS» untuk menyalin blok CSS lengkap ke clipboard. Isinya mencakup deklarasi properti individual sekaligus notasi singkat - siap ditempel ke stylesheet Anda.

Penjelasan properti dekorasi teks

  • text-decoration-line: menetapkan garis mana yang digambar. Gunakan underline untuk tautan dan penekanan, overline untuk judul dekoratif, line-through untuk efek coret (harga diskon, tugas selesai), atau none untuk menghapus dekorasi.
  • text-decoration-style: mengontrol gaya visual garis. Pilih solid untuk garis standar, double untuk dua garis paralel, dotted atau dashed untuk efek halus, atau wavy untuk dekorasi yang playful atau menandakan kesalahan.
  • text-decoration-color: menetapkan warna secara terpisah dari warna teks. Ini memungkinkan Anda memakai warna aksen merek untuk garis bawah sementara teks isi tetap pada warna netral - pola desain umum yang dimudahkan generator kami.
  • text-decoration-thickness: mengontrol lebar garis (1-10 px). Garis lebih tebal lebih terlihat dan bisa menjadi elemen desain, sedangkan garis tipis bersifat halus dan tidak mencolok. Gunakan slider di generator kami untuk menemukan keseimbangan yang pas.
  • text-underline-offset: mengontrol jarak antara garis dasar teks dan garis bawah. Offset lebih besar memberi ruang lebih antara teks dan garis, meningkatkan keterbacaan untuk garis bawah yang tebal. Setel ke auto untuk nilai bawaan browser.

Dukungan browser & kompatibilitas

Bentuk singkat text-decoration didukung di semua browser. Properti individual seperti text-decoration-thickness dan text-underline-offset didukung di Chrome 87+, Firefox 70+, Safari 12.1+, dan Edge 87+. Gaya bergelombang mendapat dukungan luas di semua browser modern. Untuk kompatibilitas maksimal, generator kami menyediakan sintaks properti individual sekaligus padanan singkatnya.

Pertanyaan yang Sering Diajukan

Generator dekorasi teks adalah alat visual yang membuat nilai text-decoration CSS dari properti yang dapat dikonfigurasi seperti jenis garis, gaya, warna, ketebalan, dan offset. Pratinjau perubahan seketika dan salin CSS dengan satu klik.

Alat ini mendukung text-decoration-line (garis bawah, garis atas, coret, tidak ada), text-decoration-style (solid, ganda, titik, putus-putus, bergelombang), text-decoration-color, text-decoration-thickness (1-10 px), dan text-underline-offset (0-20 px atau auto).

Bisa. Gunakan nilai arbitrer Tailwind: underline decoration-wavy decoration-indigo-500 decoration-2 underline-offset-4.

Ya. 100 % gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas pemakaian. Semua pemrosesan terjadi lokal di browser Anda.

Bentuk singkat text-decoration didukung di semua browser. Properti individual memerlukan Chrome 87+, Firefox 70+, Safari 12.1+, dan Edge 87+.