CodeKitHubApa Itu Alat Ini?
Alat ini menggabungkan text-shadow berwarna terang dan gelap, dengan offset ke arah berlawanan, untuk menciptakan ilusi teks timbul (embossed) atau terukir (engraved).
Beralih antara gaya Embossed dan Engraved, lalu sesuaikan slider intensitas untuk mengatur seberapa kuat efek 3D-nya terlihat.
Pratinjau langsung diperbarui secara instan saat Anda mengetik atau mengubah pengaturan apa pun, sehingga Anda bisa menyempurnakan efeknya sebelum menyalin kode CSS.
Mengapa Menggunakannya?
- Kamu lagi bikin landing page UMKM lokal dengan tema kartu nama digital bergaya vintage dan klien minta logo teksnya "kelihatan kayak dicetak timbul di logam" — atur gaya Embossed, sesuaikan intensitas, dan salin CSS-nya langsung ke section hero.
- Kamu develop UI untuk aplikasi kasir toko yang temanya skeuomorphic retro, mirip mesin kasir jadul, dan butuh angka total belanja terlihat seperti terukir di panel logam — kategori Engraved pas buat efek itu tanpa perlu gambar tambahan.
- Kamu bikin badge "Verified Seller" buat marketplace kecil-kecilan dan pengen teksnya kelihatan premium tanpa harus desain di Photoshop — generate di sini, sesuaikan warna emas, lalu tempel CSS-nya ke komponen React.
- Kamu ngerjain proyek freelance bikin website gaming clan dan mereka minta judul halaman terlihat seperti diukir di batu ala game fantasy — coba gaya Engraved dengan warna abu gelap buat efek yang pas.
- Kamu iseng eksperimen desain UI buat portofolio pribadi dan pengen tunjukkan kemampuan bikin efek CSS murni tanpa gambar atau library eksternal — generator ini kasih kode ringkas yang bisa langsung kamu jelaskan di README GitHub.
- Deadline revisi desain besok pagi dan klien baru minta tombol CTA di landing page terlihat "timbul dikit biar ga flat banget" — daripada bongkar Figma lagi, langsung generate di sini dan tempel CSS-nya ke tombol yang sudah ada.
Cara Menggunakan
- Ketik teks yang ingin Anda beri gaya.
- Pilih Embossed (timbul) atau Engraved (terukir) dari pemilih gaya.
- Sesuaikan slider intensitas dan pilih warna latar belakang serta warna teks yang cocok dengan desain Anda.
- Klik "Copy" untuk menyalin kode CSS yang dihasilkan dan tempelkan ke stylesheet Anda.
Contoh
Input
Teks: "Embossed", Gaya: Embossed, Intensitas: 2Output
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);CSS yang dihasilkan mengatur warna teks, warna latar belakang, dan text-shadow dua lapis yang menciptakan efek timbul atau terukir.
Bagaimana efek ini bekerja
Efek timbul dan ukir dibangun dari dua lapisan text-shadow dengan offset dan warna terang-gelap yang berlawanan.
| Properti | Fungsi |
|---|---|
| Bayangan terang (rgba(255,255,255,0.7)) | Mensimulasikan sumber cahaya yang mengenai satu sisi teks |
| Bayangan gelap (rgba(0,0,0,0.5)) | Mensimulasikan bayangan yang jatuh pada sisi berlawanan |
| Arah offset | Dibalik antara Embossed dan Engraved untuk membalik ilusi 3D |
| Intensitas | Mengatur seberapa jauh bayangan terang dan gelap di-offset dari teks |
| Warna yang serupa | Warna teks dan latar belakang diatur mendekati satu sama lain untuk menyembunyikan kontras datar |
Alat terkait
Untuk lebih banyak generator CSS, coba yang berikut ini.
→ CSS Glassmorphism Generator · Box Shadow Generator · Border Radius Generator
Kapan pakai Embossed dan kapan pakai Engraved
Embossed cocok dipakai untuk elemen yang ingin terasa "muncul" dari permukaan, seperti judul kartu produk, badge pencapaian, atau logo yang ingin terlihat dicetak timbul di kemasan. Efek ini memberi kesan elemen tersebut lebih menonjol dan mengundang perhatian dibanding teks datar biasa.
Engraved lebih pas untuk elemen yang ingin terasa "tertanam" di permukaan, seperti label pada panel logam di UI skeuomorphic, nomor seri di kartu member, atau judul di tema game bergaya batu dan besi. Kesan yang muncul lebih tenang dan formal dibanding Embossed.
Untuk kedua gaya, hindari memakai warna teks yang jauh berbeda dari warna background — kontras yang terlalu tinggi antara teks dan background akan membuat efek 3D dari shadow jadi kurang terlihat, karena mata lebih fokus ke kontras warna daripada ke gradasi terang-gelap dari bayangannya.
Pertanyaan yang Sering Diajukan
Apa perbedaan antara Embossed dan Engraved?
Embossed membuat teks terlihat timbul dari latar belakang, dengan bayangan terang di kiri atas dan bayangan gelap di kanan bawah. Engraved membalik ini, membuat teks terlihat terukir ke dalam latar belakang.
Mengapa efeknya terlihat paling bagus dengan warna teks dan latar belakang yang serupa?
Ilusi timbul/ukir sepenuhnya bergantung pada highlight dan bayangan dari shadow, bukan pada kontras teks terhadap latar belakang — jadi mengatur warna teks mendekati (atau sama dengan) warna latar belakang biasanya memberikan hasil paling bersih.
Bisakah saya menggunakan efek ini pada elemen apa pun, tidak hanya teks?
Properti text-shadow yang dihasilkan alat ini hanya berlaku untuk teks. Untuk efek serupa pada bentuk atau tombol, Anda memerlukan pengaturan box-shadow yang setara.
Apakah alat ini menyimpan atau melacak apa yang saya ketik?
Tidak. CSS dihasilkan sepenuhnya di peramban Anda — tidak ada yang dikirim atau disimpan di server.
Apakah ini akan berfungsi di semua peramban?
Ya — text-shadow memiliki dukungan yang sangat baik di semua peramban modern, termasuk Chrome, Firefox, Safari, dan Edge.
Kenapa efek timbul saya tidak terlihat sama sekali di background gelap?
Kemungkinan besar warna teks kamu terlalu kontras dengan bayangan gelap dari efek, sehingga bayangan gelapnya tenggelam dan hanya highlight terang yang terlihat. Untuk background gelap, coba naikkan opacity bayangan gelap secara manual di CSS hasil generate, atau gunakan warna teks yang lebih dekat dengan warna background gelapmu.
Bisakah saya pakai font apa saja dengan efek ini, atau ada batasan tertentu?
Efek ini bekerja dengan font apa pun, tapi hasilnya paling jelas terlihat di font tebal (bold) dengan ukuran besar, karena text-shadow butuh area teks yang cukup lebar untuk menampilkan gradasi terang-gelapnya. Font tipis atau ukuran kecil cenderung membuat efeknya kurang terlihat atau malah terkesan berantakan.
Apakah efek ini bisa dipakai di dalam komponen React atau Vue, bukan cuma HTML statis?
Bisa — CSS yang dihasilkan hanyalah properti standar (color, background, text-shadow) yang bisa langsung ditempel ke file CSS, CSS Module, styled-components, atau atribut style inline di framework apa pun tanpa modifikasi tambahan.
Apa bedanya intensitas rendah dan tinggi secara visual?
Intensitas rendah menghasilkan efek timbul yang halus dan subtle, cocok untuk teks body atau elemen kecil supaya tidak terlalu mencolok. Intensitas tinggi membuat jarak offset bayangan lebih jauh, menghasilkan efek 3D yang lebih dramatis, biasanya lebih pas untuk heading besar atau logo.