CodeKitHubCe este acest instrument?
Instrumentul stratifică mai multe valori text-shadow blurate în culoarea aleasă, cu raze de blur din ce în ce mai mari, pentru a recrea luminiscența moale a unei firme neon.
Sliderul de intensitate controlează câte straturi de luminiscență sunt suprapuse, de la o lumină subtilă la un efect puternic și strălucitor.
O previzualizare live pe fundal închis se actualizează instant pe măsură ce scrii sau ajustezi orice setare, ca să poți ajusta luminiscența înainte de a copia CSS-ul.
De ce să-l folosești?
- Construiești o pagină de destinație pentru un eveniment de club sau bar, iar un titlu colorat simplu nu vinde atmosfera — o luminiscență neon pe titlu semnalează "viață de noapte" instant, înainte ca vizitatorul să citească vreun cuvânt de text.
- Îți tematizezi un portofoliu în jurul unei estetici synthwave sau cyberpunk și ai nevoie ca textul principal chiar să lumineze, nu doar să pară text roz pe fundal închis — text-shadow-ul stratificat e ce vinde iluzia.
- Construiești o insignă de tip "DESCHIS" sau "BUN VENIT" pentru un magazin virtual și vrei să se citească ca o firmă neon reală, nu ca o iconiță SVG statică, întrucât straturile de luminiscență răspund la CSS real, nu la o imagine statică.
- Vrei să compari o luminiscență strânsă, subtilă, cu una la intensitate maximă, suflată, înainte de a decide care se potrivește brandului tău — mișcarea sliderului de intensitate îți arată ambele fără să scrii valorile de umbră manual.
- 100% local: CSS-ul e generat direct în browser, nimic nu e trimis către vreun server.
Cum se folosește
- Scrie textul pe care vrei să lumineze.
- Alege o culoare de luminiscență și o culoare de fundal potrivite designului tău.
- Ajustează sliderul de intensitate pentru a controla cât de puternic arată efectul de luminiscență.
- Apasă "Copiază" pentru a copia codul CSS generat și lipește-l în foaia ta de stiluri.
Exemplu
Intrare
Text: "NEON", Culoare luminiscență: roz, Intensitate: 3Rezultat
color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;CSS-ul generat setează text alb pe fundal închis, cu mai multe straturi text-shadow suprapuse și blurate, în culoarea de luminiscență aleasă.
Cum funcționează efectul de luminiscență neon
Luminiscența e construită din mai multe straturi text-shadow în aceeași culoare, fiecare cu o rază de blur mai mare decât precedentul.
| Strat | Rază de blur | Efect |
|---|---|---|
| 1 | 2px | Luminiscență interioară strânsă, aproape de litere |
| 2 | 4px | Luminiscență ușor mai largă |
| 3 | 8px | Luminiscență medie, moale |
| 4 | 16px | Luminiscență exterioară largă |
| 5 | 24px | Luminiscență ambientală largă, la intensitate maximă |
Instrumente similare
Pentru alte generatoare de efecte CSS de text, încearcă și acestea.
→ Generator de text CSS embosat · Generator de box-shadow · Generator CSS glassmorphism
Alegerea culorii de luminiscență pentru atmosfera potrivită
- Luminiscențele roz și magenta se citesc ca retro clasic anii '80 sau synthwave — cea mai comună alegere pentru design-uri de viață de noapte și arcade.
- Luminiscențele cyan și albastre înclină mai mult spre futurist sau tehnologic, comune în machete UI cyberpunk și SF.
- Luminiscențele verzi evocă o estetică de hacker sau terminal, mai ales combinate cu un font monospace.
- Luminiscențele calde, chihlimbar sau portocalii, se apropie mai mult de o firmă neon tradițională de bar decât culorile mai reci synthwave, utile pentru branding-ul unui restaurant sau bar care vrea un aer vintage, nu futurist.
Întrebări frecvente
De ce trebuie textul să fie alb ca luminiscența să arate bine?
Efectele neon funcționează cel mai bine cu o culoare de text deschisă, aproape albă, întrucât luminiscența colorată vine în întregime din straturile text-shadow — o culoare de text închisă sau saturată ar concura cu luminiscența, în loc s-o lase să iasă în evidență.
De ce e nevoie de un fundal închis pentru efect?
Ca la firmele neon reale, efectul de luminiscență e mult mai vizibil pe fundal întunecat. Pe un fundal deschis, luminiscența tinde să se estompeze și să devină greu de văzut.
Ce schimbă exact sliderul de intensitate?
Controlează câte straturi text-shadow blurate sunt suprapuse, de la o singură luminiscență strânsă la intensitate minimă, până la cinci straturi suprapuse cu o răspândire mai largă la intensitate maximă.
Instrumentul salvează sau urmărește ce scriu?
Nu. CSS-ul este generat integral în browser — nimic nu ajunge sau nu e stocat pe un server.
Va funcționa în toate browserele?
Da — text-shadow cu valori multiple separate prin virgulă are suport excelent în toate browserele moderne, inclusiv Chrome, Firefox, Safari și Edge.
Pot anima luminiscența să pâlpâie precum o firmă neon reală?
CSS-ul generat e o luminiscență statică, dar o poți extinde singur cu o animație CSS @keyframes care comută opacitatea sau intensitatea text-shadow între două stări — instrumentul îți dă valorile de bază de la care poți porni animația.
Va arăta luminiscența bine pe fundal deschis sau alb?
Nu — efectul depinde puternic de contrastul cu un fundal închis, motiv pentru care instrumentul include un câmp separat pentru culoarea de fundal alături de culoarea textului. Dacă ai nevoie de același titlu pe o secțiune deschisă a paginii, păstrează-l simplu acolo și rezervă versiunea neon pentru o secțiune sau un card întunecat.
Afectează asta performanța paginii dacă îl folosesc pe mult text?
Text-shadow e o proprietate CSS relativ ușoară, așa că câteva titluri luminoase nu vor afecta vizibil performanța. Aplicarea a cinci straturi de umbră suprapuse pe un bloc mare de text de corp nu e recomandată din motive de lizibilitate, indiferent de performanță.
Pot folosi o culoare de luminiscență diferită pentru fiecare cuvânt dintr-un titlu?
Instrumentul generează o singură culoare de luminiscență per generare, dar poți învălui cuvinte diferite în etichete <span> separate, fiecare cu propria valoare text-shadow (generezi o culoare, copiezi CSS-ul, apoi repeți pentru a doua culoare), pentru un efect de luminiscență multicoloră.
CSS-ul generat funcționează la fel în comutatoarele dark mode și light mode?
Efectul neon e conceput în jurul unui fundal închis prin natura lui, așa că dacă site-ul tău are un comutator light/dark, cel mai bine e să aplici stilul de luminiscență doar în CSS-ul de dark-mode, nu să încerci să-l faci să funcționeze pe ambele teme.