CodeKitHubCo je tento nástroj?
Tento nástroj vrství víc rozmazaných hodnot text-shadow ve vámi zvolené barvě záře, s rostoucím poloměrem rozmazání, aby napodobil jemnou záři neonového nápisu.
Posuvník intenzity ovládá, kolik vrstev záře se navrství, od jemné záře po silný, jasný efekt.
Živý náhled na tmavém pozadí se aktualizuje okamžitě při psaní nebo úpravě jakéhokoli nastavení, takže si můžete záři doladit ještě před zkopírováním CSS.
Proč ho používat?
- Stavíte vstupní stránku pro noční klub nebo akci v baru a plochý barevný nadpis neprodává atmosféru — neonová záře na titulku signalizuje "noční život" ještě předtím, než návštěvník přečte jediné slovo textu.
- Tematizujete portfolio okolo synthwave nebo kyberpunk estetiky a potřebujete, aby hero text skutečně zářil, ne jen vypadal jako růžový text na tmavém pozadí — vrstvený text-shadow je to, co prodá iluzi.
- Vytváříte odznak "OTEVŘENO" nebo "VÍTEJTE" ve stylu virtuálního obchodu a chcete, aby vypadal jako skutečný neonový nápis, ne plochá SVG ikona, protože vrstvy záře reagují na skutečné CSS místo statického obrázku.
- Chcete porovnat těsnou, jemnou záři proti maximálně intenzivní, přesvětlené, než se rozhodnete, co sedí vaší značce — posouvání intenzity vám ukáže obě varianty bez ručního psaní hodnot stínu.
- 100 % lokálně: CSS se generuje výhradně ve vašem prohlížeči, nic se neposílá na server.
Jak se používá
- Napište text, který chcete rozzářit.
- Vyberte barvu záře a barvu pozadí, která sedí vašemu designu.
- Upravte posuvník intenzity, aby efekt vypadal tak silně, jak chcete.
- Klikněte na "Kopírovat" pro zkopírování vygenerovaného CSS kódu a vložte ho do svého stylopisu.
Příklad
Vstup
Text: "NEON", Barva záře: růž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í bílý text na tmavém pozadí s několika navrstvenými, rozmazanými vrstvami text-shadow ve zvolené barvě záře.
Jak funguje efekt neonové záře
Záře se skládá z několika vrstev text-shadow ve stejné barvě, každá s větším poloměrem rozmazání než ta předchozí.
| Vrstva | Poloměr rozmazání | Efekt |
|---|---|---|
| 1. | 2px | Těsná vnitřní záře blízko písmen |
| 2. | 4px | Mírně širší záře |
| 3. | 8px | Jemná záře středního dosahu |
| 4. | 16px | Široká vnější záře |
| 5. | 24px | Rozsáhlá ambientní záře při maximální intenzitě |
Související nástroje
Další generátory CSS textových efektů.
→ CSS Emboss Text Generator · Box Shadow Generator · CSS Glassmorphism Generator
Jak vybrat barvu záře pro správnou náladu
- Růžová a magenta záře čtou se jako klasický retro styl 80. let nebo synthwave — nejběžnější volba pro design nočního života a heren.
- Azurová a modrá záře působí futuristicky a technologicky, běžné v kyberpunk a sci-fi UI mockupech.
- Zelená záře evokuje hackerskou nebo terminálovou estetiku, zejména v kombinaci s monospace písmem.
- Teplá jantarová nebo oranžová záře působí blíž tradičnímu neonovému nápisu baru než chladnější synthwave barvy, užitečné pro branding restaurací nebo barů, který chce spíš vintage než futuristický pocit.
Časté dotazy
Proč musí být text bílý, aby záře vypadala dobře?
Neonové záře fungují nejlépe s jasnou, téměř bílou barvou textu, protože barevná záře pochází výhradně z vrstev text-shadow — tmavá nebo sytá barva textu by se s září přetahovala místo aby vynikla.
Proč efekt potřebuje tmavé pozadí?
Podobně jako skutečné neonové nápisy je efekt záře mnohem viditelnější na tmavém pozadí. Na světlém pozadí má záře tendenci se vytratit a být hůř viditelná.
Co přesně mění posuvník intenzity?
Ovládá, kolik rozmazaných vrstev text-shadow se navrství, od jedné těsné záře při nízké intenzitě po pět navrstvených zář s širším rozptylem při maximální intenzitě.
Ukládá nebo sleduje nástroj, co napíšu?
Ne. CSS se generuje výhradně ve vašem prohlížeči — nic se neposílá ani neukládá na server.
Bude to fungovat ve všech prohlížečích?
Ano — text-shadow s více hodnotami oddělenými čárkou má výbornou podporu napříč všemi moderními prohlížeči, včetně Chrome, Firefox, Safari a Edge.
Můžu záři animovat, aby blikala jako skutečný neonový nápis?
Vygenerované CSS je statická záře, ale můžete ji sami rozšířit o CSS @keyframes animaci, která přepíná neprůhlednost nebo intenzitu text-shadow mezi dvěma stavy — nástroj vám dá základní hodnoty záře, ze kterých vycházet.
Bude záře stále vypadat dobře na světlém nebo bílém pozadí?
Ne — efekt silně závisí na kontrastu proti tmavému pozadí, proto nástroj obsahuje i pole pro barvu pozadí vedle barvy textu. Pokud potřebujete stejný nadpis na světlé sekci stránky, ponechte ho tam obyčejný a neonovou verzi si nechte pro tmavou sekci nebo kartu.
Ovlivňuje to výkon stránky, pokud ho použiju na hodně textu?
Text-shadow je relativně nenáročná CSS vlastnost, takže pár zářících nadpisů výkon znatelně neovlivní. Aplikovat pět navrstvených vrstev stínu na velký blok textu se ale nedoporučuje kvůli čitelnosti, bez ohledu na výkon.
Můžu použít jinou barvu záře pro každé slovo v nadpisu?
Nástroj generuje jednu barvu záře na generaci, ale slova můžete obalit do samostatných značek <span> s vlastní hodnotou text-shadow (vygenerujte jednu barvu, zkopírujte CSS, pak zopakujte pro druhou barvu), abyste získali vícebarevný efekt záře.
Funguje vygenerované CSS stejně v přepínačích tmavého a světlého režimu?
Efekt neonu je svou povahou navržený kolem tmavého pozadí, takže pokud váš web podporuje přepínač světlý/tmavý, je nejlepší aplikovat záři jen v rámci vašeho CSS pro tmavý režim, ne se ji snažit přinutit fungovat na obou tématech.