CodeKitHubČo je tento nástroj?
Nástroj navrství viacero rozmazaných text-shadow hodnôt vo zvolenej farbe žiary, s rastúcim polomerom rozmazania, aby napodobil mäkkú žiaru neónového nápisu.
Posuvník intenzity ovláda, koľko vrstiev žiary sa naskladá, od jemnej žiary až po silný, jasný efekt.
Živý náhľad na tmavom pozadí sa okamžite aktualizuje počas písania alebo úpravy akéhokoľvek nastavenia, takže si žiaru môžeš doladiť ešte pred skopírovaním CSS.
Prečo ho používať?
- Staviaš landing page pre nočný klub alebo bar event a plochý farebný nadpis nepredáva atmosféru — neónová žiara na nadpise signalizuje "nočný život" okamžite, ešte skôr, než návštevník prečíta čo i len jedno slovo textu.
- Ladíš portfólio okolo synthwave alebo cyberpunk estetiky a potrebuješ, aby hlavný text naozaj žiaril, nielen vyzeral ako ružový text na tmavom pozadí — práve vrstvený text-shadow predáva túto ilúziu.
- Staviaš odznak typu "OTVORENÉ" alebo "VITAJTE" pre virtuálny obchod a chceš, aby pôsobil ako skutočný neónový nápis, nie ako statická SVG ikona, keďže vrstvy žiary reagujú na skutočné CSS, nie na statický obrázok.
- Chceš porovnať jemnú, decentnú žiaru s prehnanou žiarou pri maximálnej intenzite pred rozhodnutím, ktorá sedí tvojej značke — posúvanie intenzity ti ukáže obe bez ručného písania hodnôt tieňa.
- 100% lokálne: CSS sa generuje priamo v prehliadači, nič sa neposiela na server.
Ako sa používa
- Napíš text, ktorý má žiariť.
- Vyber farbu žiary a farbu pozadia, ktoré sedia tvojmu dizajnu.
- Uprav posuvník intenzity, aby si nastavil silu žiariaceho efektu.
- Klikni na "Kopírovať" a skopíruj vygenerovaný CSS kód, ktorý vložíš do svojho štýlopisu.
Príklad
Vstup
Text: "NEON", Farba žiary: ružová, Intenzita: 3Výstup
color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;Vygenerované CSS nastaví biely text na tmavom pozadí s viacerými naskladanými, rozmazanými text-shadow vrstvami vo zvolenej farbe žiary.
Ako funguje neónový žiariaci efekt
Žiara je zložená z viacerých text-shadow vrstiev v rovnakej farbe, každá s väčším polomerom rozmazania než tá predchádzajúca.
| Vrstva | Polomer rozmazania | Efekt |
|---|---|---|
| 1. | 2px | Tesná vnútorná žiara blízko písmen |
| 2. | 4px | Mierne širšia žiara |
| 3. | 8px | Mäkká stredná žiara |
| 4. | 16px | Široká vonkajšia žiara |
| 5. | 24px | Rozľahlá okolitá žiara pri maximálnej intenzite |
Podobné nástroje
Vyskúšaj aj ďalšie generátory CSS textových efektov.
→ Generátor CSS reliéfneho textu · Generátor box-shadow · Generátor CSS glassmorphism
Ako vybrať farbu žiary pre správnu náladu
- Ružové a purpurové žiary pôsobia ako klasické 80. roky alebo synthwave — najbežnejšia voľba pre dizajny s nočným životom a arkádovou tematikou.
- Azúrové a modré žiary pôsobia viac futuristicky alebo technologicky, bežné v cyberpunk a sci-fi UI mockupoch.
- Zelené žiary evokujú hackerskú alebo terminálovú estetiku, najmä v kombinácii s monospace fontom.
- Teplé jantárové či oranžové žiary pôsobia bližšie k tradičnému neónovému baru než chladnejšie synthwave farby, čo sa hodí pre branding reštaurácie alebo baru, ktorý chce pôsobiť viac vintage než futuristicky.
Časté otázky
Prečo musí byť text biely, aby žiara vyzerala dobre?
Neónové žiary fungujú najlepšie so svetlou, takmer bielou farbou textu, keďže farebná žiara pochádza výhradne z text-shadow vrstiev — tmavá alebo sýta farba textu by so žiarou súperila namiesto toho, aby ju nechala vyniknúť.
Prečo efekt potrebuje tmavé pozadie?
Podobne ako pri skutočných neónových nápisoch je žiariaci efekt na tmavom pozadí oveľa viditeľnejší. Na svetlom pozadí má žiara tendenciu splynúť a stať sa ťažko viditeľnou.
Čo presne mení posuvník intenzity?
Ovláda, koľko rozmazaných text-shadow vrstiev sa naskladá, od jedinej tesnej žiary pri nízkej intenzite až po päť naskladaných žiar so širším rozptylom pri maximálnej intenzite.
Ukladá alebo sleduje nástroj to, čo napíšem?
Nie. CSS sa generuje výhradne v prehliadači — nič sa neukladá ani neposiela na server.
Bude to fungovať vo všetkých prehliadačoch?
Áno — text-shadow s viacerými hodnotami oddelenými čiarkou má výbornú podporu vo všetkých moderných prehliadačoch vrátane Chrome, Firefox, Safari a Edge.
Môžem žiaru animovať, aby blikala ako skutočný neónový nápis?
Vygenerované CSS je statická žiara, no môžeš si ju sám rozšíriť pomocou CSS @keyframes animácie, ktorá prepína priehľadnosť alebo intenzitu text-shadow medzi dvomi stavmi — nástroj ti dá základné hodnoty žiary, od ktorých môžeš animáciu odvodiť.
Bude žiara vyzerať dobre aj na svetlom alebo bielom pozadí?
Nie — efekt výrazne závisí od kontrastu voči tmavému pozadiu, preto nástroj obsahuje samostatné pole pre farbu pozadia popri farbe textu. Ak potrebuješ ten istý nadpis na svetlej časti stránky, tam ho ponechaj obyčajný a neónovú verziu vyhraď pre tmavú sekciu alebo kartu.
Ovplyvňuje to výkon stránky, ak to použijem na veľa textu?
Text-shadow je pomerne ľahká CSS vlastnosť, takže pár žiariacich nadpisov výkon citeľne neovplyvní. Aplikovanie piatich naskladaných vrstiev tieňa na veľký blok textu tela sa neodporúča kvôli čitateľnosti, bez ohľadu na výkon.
Môžem použiť inú farbu žiary pre každé slovo v nadpise?
Nástroj generuje jednu farbu žiary na jedno generovanie, no môžeš rôzne slová obaliť do samostatných <span> značiek s vlastnou text-shadow hodnotou (vygeneruješ jednu farbu, skopíruješ CSS, potom zopakuješ pre druhú farbu), a získať tak viacfarebný žiariaci efekt.
Funguje vygenerované CSS rovnako v prepínačoch tmavého a svetlého režimu?
Neónový efekt je svojou podstatou navrhnutý okolo tmavého pozadia, takže ak tvoja stránka podporuje prepínač light/dark, najlepšie je aplikovať štýl žiary len v rámci CSS pre tmavý režim, namiesto snahy o fungovanie v oboch témach.