Generator de Text CSS în Relief — Efecte de Text Ștanțat și Gravat

Efectele de text în relief și gravat dau titlurilor și butoanelor un aspect subtil, tactil, folosind nimic altceva decât un text-shadow bine ajustat. Acest instrument te lasă să scrii textul, să alegi Relief (ridicat) sau Gravat (scobit), să ajustezi intensitatea și generează instant codul CSS cu o previzualizare live.

Ce este acest instrument?

Acest instrument combină un text-shadow de culoare deschisă și unul de culoare închisă, decalate în direcții opuse, pentru a crea iluzia unui text ridicat (relief) sau scobit (gravat).

Comuți între stilurile Relief și Gravat, și ajustezi cursorul de intensitate pentru a controla cât de puternic pare efectul 3D.

O previzualizare live se actualizează instant pe măsură ce scrii sau ajustezi orice setare, ca să poți regla fin efectul înainte de a copia CSS-ul.

De ce să-l folosești?

Construiești o temă retro stil Windows 95 sau o interfață skeuomorfică și ai nevoie de acel aspect clasic "presat în plastic gri" fără să ajustezi manual decalajele de umbră în instrumentele de dezvoltare.
Proiectezi o insignă sau o pictogramă de realizare și vrei ca textul să pară ștanțat sau gravat într-un fundal metalic, nu așezat plat deasupra.
Un designer ți-a dat un mockup cu un titlu în relief și fără CSS — recreează efectul aici în loc să ghicești valorile de umbră prin încercare și eroare.
Vrei un aspect vechi de "gravat în piatră" sau presat pentru un logo sau un titlu hero fără să apelezi la un editor de imagini sau un filtru SVG.
Prototipezi mai multe niveluri de intensitate una lângă alta ca să vezi cât de subtil sau dramatic ar trebui să fie efectul 3D înainte de a stabili designul final.
100% local: CSS-ul e generat integral în browser, nimic nu este trimis către un server.

Cum se folosește

Scrie textul pe care vrei să îl stilizezi.
Alege Relief (ridicat) sau Gravat (scobit) din selectorul de stil.
Ajustează cursorul de intensitate și alege o culoare de fundal și de text care se potrivesc designului tău.
Apasă "Copiază" pentru a copia codul CSS generat și lipește-l în foaia de stil.

Exemplu

Intrare

Text: "Relief", Stil: Relief, Intensitate: 2

Rezultat

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-ul generat setează culoarea textului, culoarea de fundal și un text-shadow cu două straturi care creează efectul de relief sau de gravură.

Cum funcționează efectul

Efectele de relief și gravură sunt construite din două straturi de text-shadow decalate, cu culori deschise și închise opuse.

Proprietate	Scop
Umbră deschisă (rgba(255,255,255,0.7))	Simulează o sursă de lumină care prinde o margine a textului
Umbră închisă (rgba(0,0,0,0.5))	Simulează o umbră care cade pe marginea opusă
Direcția decalajului	Inversată între Relief și Gravat pentru a răsturna iluzia 3D
Intensitate	Controlează cât de departe sunt decalate umbrele deschisă și închisă față de text
Culori asemănătoare	Culoarea textului și a fundalului setate apropiat pentru a ascunde contrastul plat

Unde funcționează cel mai bine textul în relief și gravat

Titluri de secțiune și etichete pe un card sau panou de culoare plată, unde efectul 3D subtil adaugă textură fără să concureze cu conținutul principal.
Insigne, sigilii și pictograme de realizare, unde un aspect ștanțat sau gravat întărește senzația de ceva oficial sau câștigat.
Teme UI retro sau skeuomorfice (interfețe vechi de sistem de operare, butoane în relief) unde efectul face parte din limbajul de design, nu e un accent izolat.
Evită-l pe text de corp mic sau paragrafe lungi — efectul se bazează pe potrivirea apropiată a culorilor text/fundal, ceea ce dăunează lizibilității simple la dimensiuni mici.

Instrumente similare

Pentru mai multe generatoare CSS, încearcă acestea.

→ Generator CSS Glassmorphism · Generator Box Shadow · Generator Border Radius

Întrebări frecvente

Care e diferența dintre Relief și Gravat?

Relief face textul să pară ridicat din fundal, cu umbra deschisă în stânga-sus și umbra închisă în dreapta-jos. Gravat inversează asta, făcând textul să pară scobit în fundal.

De ce efectul arată cel mai bine cu o culoare de text și fundal apropiate?

Iluzia de relief/gravură se bazează în totalitate pe umbrele deschise și închise, nu pe contrastul dintre text și fundal — deci setarea culorii textului aproape de (sau identică cu) culoarea de fundal dă de obicei cel mai curat rezultat.

Pot folosi acest efect pe orice element, nu doar pe text?

Proprietatea text-shadow generată de acest instrument se aplică doar textului. Pentru un efect similar pe forme sau butoane, ai avea nevoie de o configurație comparabilă box-shadow.

Instrumentul salvează sau urmărește ce scriu?

Nu. CSS-ul e generat integral în browser — nimic nu este trimis sau stocat pe un server.

Va funcționa în toate browserele?

Da — text-shadow are suport excelent în toate browserele moderne, inclusiv Chrome, Firefox, Safari și Edge.

De ce efectul de relief dispare sau arată greșit pe un fundal închis?

Stratul de umbră deschisă se bazează pe a ieși în evidență pe o suprafață mai deschisă — pe un fundal foarte întunecat, evidențierea albă poate să pară spălată sau inversată față de ce te-ai aștepta. Încearcă să schimbi textul și fundalul la un gri mediu, sau crește opacitatea umbrei deschise, pentru a păstra iluzia 3D lizibilă pe teme mai întunecate.

Pot anima sau tranziționa efectul de relief la hover?

Da — text-shadow poate fi animat cu o tranziție CSS, deci poți trece lin de la o stare plată la relief (sau între intensități Relief și Gravat) la :hover sau :focus. Copiază valoarea de umbră generată ca stare "hover" și combină-o cu o regulă transition: text-shadow 0.2s ease; pe elementul de bază.

Cursorul de intensitate afectează performanța pe cantități mari de text?

Nu — text-shadow e o proprietate CSS ușoară indiferent de intensitate, fiind doar două straturi de umbră calculate la fel, indiferent dacă decalajul e de 1px sau 6px. E sigur de folosit pe titluri, butoane sau text din corp, fără îngrijorări legate de performanța randării.

Cum fac efectul să arate bine cu un font personalizat în loc de cel implicit?

Iluzia de relief/gravură tinde să se citească cel mai clar pe fonturi groase, cu trăsături late, pentru că e mai multă suprafață în care decalajul umbrei să prindă lumină și umbră. Fonturile subțiri pot face efectul să arate slab sau zgomotos — dacă fontul tău personalizat nu se vede clar, încearcă o grosime mai mare a fontului sau crește puțin cursorul de intensitate pentru a compensa.

Pot folosi două culori diferite în loc de alb/negru pentru umbrele deschisă și închisă?

CSS-ul generat e un punct de plecare pe care ești liber să îl editezi — schimbă valorile rgba(255,255,255,...) și rgba(0,0,0,...) cu orice pereche de culori după ce ai copiat codul, de exemplu o evidențiere aurie caldă și o umbră maro-închis pentru un aspect de placă de bronz, în loc de efectul implicit de metal gri.