Generator Text Shadow CSS
Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.
Ce este proprietatea text-shadow în CSS?
text-shadow adaugă efecte de umbră glifelor textului. Fiecare umbră este definită de o deplasare orizontală, una verticală, o rază de blur opțională și o culoare, iar mai multe umbre pot fi combinate într-o singură valoare separată prin virgule pentru efecte bogate.
Cum funcționează mai multe straturi de umbră?
Straturile sunt desenate de jos în sus în ordinea declarării, astfel încât prima umbră din listă apare deasupra celorlalte. Acest generator îți permite să adaugi, să ștergi, să activezi și să dezactivezi straturi, fiecare cu offset, blur, culoare și opacitate proprii, pentru a suprapune efecte precum Neon sau 3D.
Ce înseamnă offset X, offset Y și blur?
Offset X mută umbra la stânga sau la dreapta glifelor, offset Y în sus sau în jos, iar raza de blur înmoaie marginile: 0 dă o margine tare ca în stilurile Retro sau Contur, valorile mai mari răspândesc culoarea ca o strălucire.
Cum creez un efect de neon?
Folosește presetarea Neon sau configurează mai multe straturi cu offset zero, aceeași culoare vie și valori de blur crescânde, de exemplu 0 0 3px, 0 0 8px și 0 0 20px. Haloanele suprapuse imită lumina unui tub de neon.
text-shadow afectează performanța randării?
Câteva straturi statice sunt ieftine, dar textul cu multe umbre puternic estompate costă mai mult la redesenare. Umbre grele pe paragrafe lungi sau animarea continuă a text-shadow pot cauza pierderi de cadre pe dispozitive slabe și mobile; preferă titluri scurte, blur moderat sau animează opacitatea.
Cum fac o umbră semitransparentă?
Fiecare strat are un cursor de opacitate care transformă culoarea aleasă în notație rgba, de exemplu rgba(0, 0, 0, 0.5). Umbrele semitransparente se contopesc natural cu orice fundal — așa construiește presetarea Hârtie efectul de tipar în relief, soft.
Care este diferența dintre text-shadow și box-shadow?
text-shadow se aplică formei glifelor textului și nu are valori de răspândire sau interioare, în timp ce box-shadow înconjoară caseta dreptunghiulară a oricărui element. Sintaxa de offset și blur este comună, dar unul nu îl înlocuiește pe celălalt.
Ce browsere acceptă text-shadow?
text-shadow este acceptat de toate browserele moderne, inclusiv Chrome, Firefox, Safari, Edge și Opera, și este stabil fără prefixe de peste un deceniu. Umbrele pe mai multe straturi funcționează la fel peste tot.
Ce scriu este trimis către un server?
Nu. Textul de previzualizare și toate straturile configurate rămân în browserul tău, iar CSS-ul este generat local pe pagină. Nimic nu circulă prin rețea, astfel încât unealta funcționează și offline după încărcare.
Cum se folosește Generator Text Shadow CSS
Proiectează umbre de text CSS prin stivuirea straturilor în loc să ghicești un singur offset. Fiecare schimbare se randează pe un text de previzualizare mare, în direct, iar CSS-ul se generează local în browserul tău.
- Scrie propriile tale cuvinte în câmpul Text de previzualizare pentru a testa efectul pe un text real.
- Încearcă un preset: Neon, Hârtie, 3D, Retro, Strălucire sau Contur încarcă straturi gata făcute.
- Ajustează Offset X, Offset Y, Blur, Culoarea și Opacitatea fiecărui strat cu glisoarele lui.
- Folosește Adaugă strat pentru a stivui mai multe umbre, debifează un strat pentru a-l dezactiva, sau șterge-l cu pictograma de coș de gunoi.
- Copiază regula text-shadow generată și lipește-o în foaia ta de stiluri.
Strălucirile de neon arată cel mai bine cu trei sau patru straturi de aceeași culoare și blur crescând — păstrează offseturile la zero și lasă blurul să facă treaba.
Instrumente conexe
- Generator Box Shadow CSS Generator box-shadow CSS online gratuit. Creați vizual umbre frumoase cu offset, blur, spread, culoare și inset ajustabile. Previzualizare live și copiere instantanee a codului.
- Generator Gradient CSS Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
- Generator de Litere Decorative Generator de litere decorative gratuit cu 28 stiluri Unicode. Creează text îngroșat, cursiv, gotic și încercuit pentru bio Instagram, TikTok, WhatsApp și nume de joc.
- Generator de Border-radius Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Easing CSS Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
- Generator CSS Clip Path Generator CSS clip-path online gratuit. Creează forme polygon, circle, ellipse și inset cu puncte glisabile, previzualizare live și copierea codului CSS dintr-un clic.
- Frumusețare CSS Formatați și frumusețați codul CSS instantaneu. Convertiți CSS minificat în cod lizibil cu opțiuni personalizabile.