CodeKitHubMikä tämä työkalu on?
Tämä työkalu pinoaa useita sumeita text-shadow-arvoja valitsemassasi hehkuvärissä, kasvavilla sumennussäteillä, luodakseen uudelleen neonkyltin pehmeän hehkun.
Säädä voimakkuusliukusäädintä hallitaksesi kuinka monta hehkukerrosta pinotaan, hienovaraisesta hehkusta vahvaan, kirkkaaseen tehosteeseen.
Reaaliaikainen esikatselu tummalla taustalla päivittyy heti kun kirjoitat tai säädät mitä tahansa asetusta, joten voit hienosäätää hehkua ennen CSS:n kopiointia.
Miksi käyttää sitä?
- Rakennat laskeutumissivua yökerho- tai baaritapahtumalle, eikä tasainen värillinen otsikko myy tunnelmaa — hehkuva otsikko signaloi "yöelämää" heti sivun latautuessa, ennen kuin kävijä lukee sanaakaan tekstiä.
- Teemoitat portfoliosivustoa synthwave- tai cyberpunk-estetiikan ympärille, ja hero-tekstin pitää oikeasti hehkua, ei vain näyttää vaaleanpunaiselta tekstiltä tummalla taustalla — kerroksellinen text-shadow myy illuusion.
- Rakennat "OPEN"- tai "WELCOME"-tyylistä merkkiä virtuaaliliikkeelle ja haluat sen näyttävän oikealta neonkyltiltä eikä tasaiselta SVG-kuvakkeelta, koska hehkukerrokset reagoivat aitoon CSS:ään staattisen kuvan sijaan.
- Haluat vertailla tiukkaa, hienovaraista hehkua räjähtävän maksimivoimakkaan hehkun kanssa ennen kuin päätät, kumpi sopii brändiisi — voimakkuusasetuksen liu'uttaminen näyttää molemmat ilman että kirjoitat shadow-arvoja käsin.
Käyttöohje
- Kirjoita teksti, jonka haluat hehkuvan.
- Valitse hehkuväri ja taustaväri, joka sopii suunnitteluusi.
- Säädä voimakkuusliukusäädintä hallitaksesi kuinka vahvalta hehkutehoste näyttää.
- Klikkaa "Kopioi" kopioidaksesi generoidun CSS-koodin ja liitä se tyylitiedostoosi.
Esimerkki
Syöte
Teksti: "NEON", Hehkuväri: pinkki, Voimakkuus: 3Tuloste
color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;Generoitu CSS asettaa valkoisen tekstin tummalle taustalle useilla pinotuilla, sumeilla text-shadow-kerroksilla valitussa hehkuvärissä.
Miten neonhehkutehoste toimii
Hehku rakennetaan useista samanvärisistä text-shadow-kerroksista, joista jokaisella on edellistä suurempi sumennussäde.
| Kerros | Sumennussäde | Tehoste |
|---|---|---|
| 1. | 2px | Tiukka sisähehku lähellä kirjaimia |
| 2. | 4px | Hieman leveämpi hehku |
| 3. | 8px | Pehmeä keskialueen hehku |
| 4. | 16px | Leveä ulkohehku |
| 5. | 24px | Laaja ympäristöhehku maksimivoimakkuudella |
Aiheeseen liittyvät työkalut
Lisää CSS-tekstitehostegeneraattoreita löydät täältä.
→ CSS-kohokuviotekstigeneraattori · Box Shadow -generaattori · CSS Glassmorphism -generaattori
Oikean hehkuvärin valitseminen tunnelmaan
- Pinkit ja magentat hehkut kuulostavat klassiselta 80-luvun retrolta tai synthwavelta — yleisin valinta yöelämä- ja pelihalliteemaisiin suunnitelmiin.
- Syaanit ja siniset hehkut kallistuvat futuristisempaan tai teknologiapainotteisempaan suuntaan, yleisiä cyberpunk- ja scifi-käyttöliittymämockupeissa.
- Vihreät hehkut tuovat mieleen hakkeri- tai pääteestetiikan, etenkin tasavälisen fontin kanssa yhdistettynä.
- Lämpimät meripihka- tai oranssit hehkut tuntuvat lähempänä perinteistä neonbaarikylttiä kuin viileämmät synthwave-värit, hyödyllisiä ravintola- tai baaribrändäykseen, joka tavoittelee vintage-tunnelmaa futuristisen sijaan.
Usein kysytyt kysymykset
Miksi tekstin pitää olla valkoinen, jotta hehku näyttäisi oikealta?
Neonhehkut toimivat parhaiten kirkkaalla, lähes valkoisella tekstivärillä, koska värillinen hehku tulee kokonaan text-shadow-kerroksista — tumma tai kylläinen tekstiväri kilpailisi hehkun kanssa sen sijaan että antaisi sen erottua.
Miksi tehoste tarvitsee tumman taustan?
Kuten oikeat neonkyltit, hehkutehoste on paljon näkyvämpi tummaa taustaa vasten. Vaalealla taustalla hehku pyrkii häviämään ja vaikeasti nähtäväksi.
Mitä voimakkuusliukusäädin oikeasti muuttaa?
Se hallitsee kuinka monta sumeaa text-shadow-kerrosta pinotaan, yhdestä tiukasta hehkusta matalalla voimakkuudella viiteen kerroshehkuun leveämmällä levittäytymisellä maksimivoimakkuudella.
Tallentaako tai seuraako tämä työkalu mitä kirjoitan?
Ei. CSS generoidaan kokonaan selaimessasi — mitään ei lähetetä palvelimelle tai tallenneta sinne.
Toimiiko tämä kaikissa selaimissa?
Kyllä — text-shadow useilla pilkulla erotetuilla arvoilla on erinomainen tuki kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge.
Voinko animoida hehkun välkkymään kuin oikea neonkyltti?
Generoitu CSS on staattinen hehku, mutta voit laajentaa sitä itse CSS @keyframes -animaatiolla, joka vaihtaa text-shadow'n läpinäkyvyyttä tai voimakkuutta kahden tilan välillä — työkalu antaa sinulle perushehkuarvot, joista animoida.
Näyttääkö hehku edelleen hyvältä vaalealla tai valkoisella taustalla?
Ei — tehoste riippuu voimakkaasti kontrastista tummaa taustaa vasten, minkä takia työkalussa on taustavärikenttä tekstivärikentän lisäksi. Jos tarvitset saman otsikon sivusi vaalealla osiolla, pidä se siellä yksinkertaisena ja varaa neonversio tummalle osiolle tai kortille.
Vaikuttaako tämä sivun suorituskykyyn, jos käytän sitä paljon tekstissä?
Text-shadow on suhteellisen kevyt CSS-ominaisuus, joten kourallinen hehkuvia otsikoita ei vaikuta huomattavasti suorituskykyyn. Viiden pinotun shadow-kerroksen soveltamista suureen leipätekstilohkoon ei kuitenkaan suositella luettavuuden vuoksi, suorituskyvystä riippumatta.
Voinko käyttää eri hehkuväriä jokaiselle sanalle otsikossa?
Työkalu generoi yhden hehkuvärin per generointikerta, mutta voit kääriä eri sanat erillisiin <span>-tageihin, joilla on omat text-shadow-arvonsa (generoi yksi väri, kopioi CSS, toista toiselle värille) saadaksesi monivärisen hehkutehosteen.
Toimiiko generoitu CSS samalla tavalla vaalea/tumma-tilan vaihtajissa?
Neontehoste on luonnostaan suunniteltu tumman taustan ympärille, joten jos sivustosi tukee vaalea/tumma-vaihtajaa, on parasta soveltaa hehkutyylittelyä vain dark mode -CSS:ssäsi sen sijaan että yrittäisit saada sen toimimaan molemmilla teemoilla.