Generator Bayangan Teks CSS

Rancang efek CSS text-shadow berlapis secara visual. Sesuaikan offset, blur, warna, dan opacity. Salin CSS secara instan.

Tool Lab

Teks Pratinjau

Ukuran Font — 48px

Warna Teks

Warna Latar Belakang

Lapisan Bayangan (1)

Offset X

Offset Y

Kabur

Warna

Opasitas — 30%

CSS yang Dihasilkan

text-shadow: 2px 2px 6px rgba(0,0,0,0.30);

Tentang alat ini

Generator Bayangan Teks CSS memungkinkan Anda menyusun bayangan teks berlapis secara visual dan mendapatkan output CSS seketika. Setiap lapisan memiliki kontrol independen untuk offset X/Y, radius kabur, warna, dan opasitas.

Opasitas diterapkan sebagai saluran alfa RGBA, memberikan transparansi yang halus tanpa trik khusus browser. CSS yang dihasilkan berfungsi di semua browser modern.

Cara penggunaan

Pilih preset untuk memulai, atau konfigurasikan lapisan secara manual.
Ketik teks pratinjau dan sesuaikan ukuran font dan warna.
Tambahkan lebih banyak lapisan dengan + Tambah Lapisan untuk efek kompleks.
Klik Salin CSS untuk menyalin deklarasi text-shadow langsung ke stylesheet Anda.

Kasus penggunaan

Pengembang frontend membuat judul bagian hero dengan kedalaman. Desainer membuat prototipe efek teks di CSS. Tim pemasaran membuat teks CTA yang menarik dengan efek cahaya dan neon.

Pertanyaan umum

Berapa banyak lapisan yang bisa ditambahkan? — Tidak ada batasan. CSS mendukung sejumlah nilai text-shadow yang dipisahkan koma. Dalam praktiknya, 1-4 lapisan mencakup sebagian besar efek.
Apakah text-shadow berfungsi di semua browser? — Ya. text-shadow telah sepenuhnya didukung di semua browser modern sejak 2012.
Apa itu radius kabur 0? — Bayangan tepi tajam tanpa kabur, berguna untuk efek retro atau garis tepi.