Softonic

Generator Bayangan Teks CSS

Langkah 1 / 2
hasilkan CSS

Menyetel deklarasi text-shadow dengan mengira-ira di DevTools memang bisa, tetapi prosesnya jadi menebak-nebak begitu Anda membutuhkan kilau neumorfik yang lembut, bayangan dua lapis bergaya retro, atau garis kontur tajam setebal 1px pada judul besar. Generator ini memungkinkan Anda mengatur offset X, offset Y, jari-jari kabur, serta warna RGBA, dan menyalin satu baris CSS yang siap ditempel.

Cara membuat efek bayangan teks

  1. 1

    Atur offset

    X merupakan pergeseran horizontal dalam satuan piksel, sedangkan Y merupakan pergeseran vertikal. Nilai Y positif mendorong bayangan ke bawah, sedangkan nilai Y negatif mendorongnya ke atas.

  2. 2

    Pilih jari-jari kabur

    Nilai blur 0 menghasilkan siluet yang tegas; nilai yang lebih tinggi akan melemahkan bayangan secara bertahap. Nilai blur biasa untuk efek blur lembut berkisar antara 4 hingga 12 piksel.

  3. 3

    Pilih warna

    Gunakan string RGBA untuk mengatur tingkat transparansi. `rgba(0,0,0,0.35)` merupakan nilai bawaan yang aman untuk kedalaman halus pada latar belakang terang.

  4. 4

    Salin deklarasinya

    Alat ini menghasilkan `text-shadow: Xpx Ypx Blurpx color;`, cukup masukkan ke selektor yang sesuai di stylesheet Anda.

Resep bayangan teks yang benar-benar terlihat menarik

Bayangan teks adalah jumlah dari empat angka dan satu warna. Ingatlah hal ini, dan Anda bisa menciptakan hampir semua efek yang ada di majalah atau halaman landing page.

Contekan

Efek Deklarasi
Kedalaman halus text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Bayangan lembut text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Garis kontur 1px text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Ganda retro text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Cahaya neon text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Menumpuk beberapa bayangan

text-shadow menerima daftar yang dipisahkan koma. Peramban menggambar dengan algoritma pelukis, sesuai urutan pada kode, bayangan terakhir dalam daftar berada paling belakang. Gunakan ini untuk meniru garis kontur (empat bayangan tajam berukuran 1px pada empat arah) atau untuk membangun kedalaman dengan menumpuk satu bayangan dekat yang tajam dan satu bayangan jauh yang menyebar.

Kapan sebaiknya tidak memakai text-shadow

  • Pada teks isi yang sangat kecil, kabur di atas 2px akan membuat glif terlihat berlepotan. Sebaiknya gunakan -webkit-font-smoothing dan kontras yang lebih kuat.
  • Untuk animasi bagian hero yang sensitif terhadap kinerja, hindari lebih dari tiga bayangan bertumpuk; setiap lapisan memaksa peramban merasterisasi ulang teks.
  • Jika Anda memerlukan bayangan dengan offset rapat pada lintasan kompleks (kurva atau rotasi), pertimbangkan <filter> SVG dengan feDropShadow sebagai gantinya, ia mengikuti kontur glif dengan lebih akurat.

Pertanyaan yang Sering Diajukan

Secara desain, hasilnya hanya berupa satu lapisan bayangan. Untuk menambahkan efek pada lapisan-lapisan tersebut, jalankan generator beberapa kali dan gabungkan hasilnya menggunakan tanda koma, misalnya text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow mengikuti garis kontur karakter teks yang ditampilkan, sedangkan box-shadow mengikuti kotak batas berbentuk persegi panjang dari elemen tersebut. Keduanya menggunakan parameter yang serupa, namun proses rasterisasinya dilakukan terhadap bentuk yang sama sekali berbeda.

Peramban melakukan rasterisasi bayangan teks terhadap kisi piksel perangkat. Bayangan dengan nilai blur 0 pada layar berukuran 2x akan ditampilkan pada posisi sub-piksel dan dapat terlihat agak lembut. Meningkatkan nilai blur menjadi 1 umumnya dapat memperbaiki tampilan tersebut tanpa mengubah bobot visualnya.

Nilai yang Anda masukkan dikirim ke server kami untuk menyusun deklarasi, tetapi tidak disimpan atau digunakan kembali. Pada tampilan bertahap, nilai tersebut dibawa dalam tautan antar langkah; pada tampilan satu halaman, tidak ada yang disimpan, cukup perbarui halaman untuk menghilangkannya sepenuhnya.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Alat ini tersedia dalam bahasa lain