CodeKitHubMi ez az eszköz?
Ez az eszköz több elmosott text-shadow értéket rétegez egymásra a választott izzási színben, növekvő elmosási sugárral, hogy visszaadja egy neon tábla lágy izzását.
Az intenzitás csúszka szabályozza, hány izzási réteg legyen egymásra rétegezve, egy finom izzástól egy erős, fényes hatásig.
Egy sötét hátterű élő előnézet azonnal frissül, ahogy gépelsz vagy módosítasz bármilyen beállítást, így finomíthatod az izzást, mielőtt lemásolnád a CSS-t.
Miért érdemes használni?
- Landing oldalt építesz egy éjszakai klubnak vagy bár rendezvénynek, és egy sima színes fejléc nem adja el a hangulatot — egy neon izzás a főcímen azonnal jelez "éjszakai életet", mielőtt a látogató egy szót is elolvasna.
- Egy portfóliót synthwave vagy cyberpunk esztétikára hangolsz, és szükséged van rá, hogy a hero szöveg tényleg izzon, ne csak rózsaszín szövegnek tűnjön sötét háttéren — a rétegzett text-shadow az, ami eladja az illúziót.
- "NYITVA" vagy "ÜDVÖZLÜNK" stílusú jelvényt építesz egy virtuális üzlethez, és azt szeretnéd, hogy tényleg úgy nézzen ki, mint egy valódi neon tábla, ne egy lapos SVG ikon, mivel az izzási rétegek valódi CSS-re reagálnak, nem egy statikus képre.
- Össze szeretnél hasonlítani egy szoros, finom izzást egy maximális intenzitású, túltelített izzással, mielőtt eldöntenéd, melyik illik a márkádhoz — az intenzitás csúsztatásával mindkettőt megmutatja anélkül, hogy kézzel kellene megírnod az árnyékértékeket.
- 100% helyi: a CSS generálása teljesen a böngésződben történik, semmi nem kerül szerverre.
Használati útmutató
- Írd be a szöveget, amit izzóvá szeretnél tenni.
- Válassz izzási színt és háttérszínt, ami illik a designodhoz.
- Állítsd be az intenzitás csúszkát, hogy az effekt olyan erősnek tűnjön, amilyennek szeretnéd.
- Kattints a "Másolás" gombra a generált CSS kód másolásához, és illeszd be a stíluslapodba.
Példa
Bemenet
Szöveg: "NEON", Izzási szín: rózsaszín, Intenzitás: 3Kimenet
color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;A generált CSS fehér szöveget állít be sötét háttéren, több egymásra rétegezett, elmosott text-shadow réteggel a választott izzási színben.
Hogyan működik a neon izzási effektus
Az izzás több, azonos színű text-shadow rétegből épül fel, mindegyik nagyobb elmosási sugárral, mint az előző.
| Réteg | Elmosási sugár | Hatás |
|---|---|---|
| 1. | 2px | Szoros belső izzás közel a betűkhöz |
| 2. | 4px | Kicsit szélesebb izzás |
| 3. | 8px | Lágy középtávú izzás |
| 4. | 16px | Széles külső izzás |
| 5. | 24px | Széles körfényű izzás maximális intenzitásnál |
Kapcsolódó eszközök
Több CSS szöveghatás-generátor.
→ CSS Emboss Text Generator · Box Shadow Generator · CSS Glassmorphism Generator
Izzási szín választása a megfelelő hangulathoz
- A rózsaszín és magenta izzások klasszikus 80-as évekbeli retro vagy synthwave hatást keltenek — a legelterjedtebb választás éjszakai élet és játékterem témájú designokhoz.
- A cián és kék izzások futurisztikusabb vagy technológiaibb hatásúak, gyakoriak cyberpunk és sci-fi UI mockupokban.
- A zöld izzás hacker vagy terminál esztétikát idéz, különösen monospace betűtípussal párosítva.
- A meleg borostyán vagy narancs izzás közelebb áll a hagyományos bár neon tábla hangulatához, mint a hűvösebb synthwave színek, hasznos étterem vagy bár márkaépítéshez, ami inkább vintage, mint futurisztikus hatást szeretne.
Gyakori kérdések
Miért kell a szövegnek fehérnek lennie, hogy az izzás jól nézzen ki?
A neonizzások a legjobban egy fényes, majdnem fehér szövegszínnel működnek, mivel a színes izzás teljesen a text-shadow rétegekből ered — egy sötét vagy telített szövegszín versenyezne az izzással ahelyett, hogy hagyná kiemelkedni.
Miért van szüksége az effektusnak sötét háttérre?
A valódi neon táblákhoz hasonlóan az izzási effektus sokkal láthatóbb sötét háttéren. Világos háttéren az izzás hajlamos elmosódni és nehezen láthatóvá válni.
Mit változtat pontosan az intenzitás csúszka?
Szabályozza, hány elmosott text-shadow réteg legyen egymásra rétegezve, egyetlen szoros izzástól alacsony intenzitásnál öt rétegezett, szélesebb terjedésű izzásig maximális intenzitásnál.
Az eszköz elmenti vagy nyomon követi, amit beírok?
Nem. A CSS teljesen a böngésződben kerül generálásra — semmi nem kerül szerverre vagy tárolásra.
Ez minden böngészőben működni fog?
Igen — a text-shadow több, vesszővel elválasztott értékkel kiváló támogatottsággal rendelkezik minden modern böngészőben, beleértve a Chrome-ot, Firefoxot, Safarit és Edge-et.
Animálhatom az izzást, hogy villogjon, mint egy valódi neon tábla?
A generált CSS statikus izzás, de kibővítheted egy CSS @keyframes animációval, ami a text-shadow áttetszőségét vagy intenzitását vált két állapot között — az eszköz megadja az alap izzási értékeket, amikből kiindulhatsz.
Az izzás továbbra is jól fog kinézni világos vagy fehér háttéren?
Nem — az effektus erősen függ a sötét háttérrel szembeni kontraszttól, ezért az eszköz a szövegszín mellett háttérszín mezőt is tartalmaz. Ha ugyanarra a főcímre a weboldalad világos szekciójában is szükséged van, hagyd ott simán, és tartsd fenn a neon verziót egy sötét szekcióhoz vagy kártyához.
Befolyásolja az oldal teljesítményét, ha sok szövegen használom?
A text-shadow viszonylag könnyű CSS tulajdonság, így néhány izzó fejléc nem befolyásolja észrevehetően a teljesítményt. Öt rétegezett árnyékréteg alkalmazása nagy szövegblokkra olvashatósági okokból nem ajánlott, teljesítménytől függetlenül.
Használhatok különböző izzási színt egy fejléc minden szavához?
Az eszköz generálásonként egy izzási színt ad, de a szavakat külön <span> tagekbe csomagolhatod saját text-shadow értékkel (generálj egy színt, másold a CSS-t, majd ismételd meg a második színnel), hogy többszínű izzási effektust kapj.
A generált CSS ugyanúgy működik sötét és világos mód váltásnál?
A neon effektus természeténél fogva sötét háttérre van tervezve, így ha az oldalad támogat egy világos/sötét váltót, a legjobb, ha az izzási stílust csak a sötét módú CSS-eden belül alkalmazod, ahelyett hogy megpróbálnád mindkét témán működtetni.