CodeKitHubCo je tento nástroj?
Nástroj kombinuje světlý a tmavý text-shadow, posunuté v opačných směrech, aby vytvořily iluzi nadzvednutého (vypouklého) nebo vyřezaného (vyrytého) textu.
Přepínejte mezi styly Vypouklý a Vyrytý a posuvníkem intenzity nastavte, jak silně 3D efekt vypadá.
Živý náhled se aktualizuje okamžitě, jak píšete nebo upravujete jakékoli nastavení, takže efekt doladíte předtím, než zkopírujete CSS.
Proč ho používat?
- Tvoříte retro téma UI ve stylu Windows 95 nebo skeuomorfní design a potřebujete ten klasický vzhled „vtlačeného do šedého plastu“ bez ručního ladění posunů stínu ve vývojářských nástrojích.
- Navrhujete odznak nebo ikonu úspěchu a chcete, aby text vypadal jako vyražený nebo vyrytý do kovového pozadí místo aby ležel plochý navrchu.
- Designér vám předal mockup s reliéfním nadpisem a bez CSS — obnovte efekt tady místo hádání hodnot stínu pokusem a omylem.
- Chcete starodávný vzhled „vytesaného do kamene“ nebo knihtiskový styl pro logo nebo hlavní nadpis bez sáhnutí po editoru obrázků nebo SVG filtru.
- Prototypujete několik úrovní intenzity vedle sebe, abyste viděli, jak jemný versus dramatický by měl 3D efekt být, než zvolíte finální design.
- 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 stylizovat.
- Vyberte Vypouklý (nadzvednutý) nebo Vyrytý (vyřezaný) z nabídky stylů.
- Upravte posuvník intenzity a vyberte barvu pozadí a textu odpovídající vašemu designu.
- 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: „Reliéf“, Styl: Vypouklý, Intenzita: 2Výstup
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);Vygenerované CSS nastaví barvu textu, barvu pozadí a dvouvrstvý text-shadow, který vytváří vypouklý nebo vyrytý efekt.
Jak efekt funguje
Vypouklý a vyrytý efekt jsou vytvořeny ze dvou posunutých vrstev text-shadow s opačnými světlými a tmavými barvami.
| Vlastnost | Účel |
|---|---|
| Světlý stín (rgba(255,255,255,0.7)) | Simuluje světelný zdroj dopadající na jednu hranu textu |
| Tmavý stín (rgba(0,0,0,0.5)) | Simuluje stín padající na opačnou hranu |
| Směr posunu | Obrácený mezi Vypouklým a Vyrytým pro převrácení 3D iluze |
| Intenzita | Řídí, jak daleko jsou světlý a tmavý stín posunuty od textu |
| Shodné barvy | Barva textu a pozadí nastavená blízko sebe, aby skryla plochý kontrast |
Kde vypouklý a vyrytý text funguje nejlépe
- Nadpisy sekcí a popisky na kartě nebo panelu jedné barvy, kde jemný 3D efekt přidá texturu, aniž by soutěžil s obsahem.
- Odznaky, pečetě a ikony úspěchů, kde vyražený nebo vyrytý vzhled posiluje pocit něčeho oficiálního nebo zaslouženého.
- Retro nebo skeuomorfní témata UI (staré ovládací prvky OS, reliéfní tlačítka), kde je efekt součástí designového jazyka, ne jednorázový akcent.
- Vyhněte se mu u malého běžného textu nebo dlouhých odstavců — efekt spoléhá na blízkou shodu barev textu a pozadí, což škodí čisté čitelnosti při malých velikostech.
Související nástroje
Další generátory CSS.
→ Generátor CSS glassmorphismu · Generátor box-shadow · Generátor zaoblených rohů
Časté dotazy
Jaký je rozdíl mezi Vypouklým a Vyrytým?
Vypouklý styl dělá text, jako by vystupoval z pozadí, se světlým stínem vlevo nahoře a tmavým vpravo dole. Vyrytý styl to obrátí, takže text vypadá vyřezaný do pozadí.
Proč efekt vypadá nejlépe s barvou textu shodnou s pozadím?
Iluze vypouklosti/vyrytí spoléhá výhradně na světla a stíny, ne na kontrast textu vůči pozadí — takže nastavení barvy textu blízko (nebo shodně) s barvou pozadí obvykle dá nejčistší výsledek.
Můžu tento efekt použít na jiný element, ne jen text?
Vlastnost text-shadow, kterou tento nástroj generuje, se vztahuje jen na text. Pro podobný efekt na tvarech nebo tlačítkách byste potřebovali srovnatelné nastavení box-shadow.
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 má vynikající podporu ve všech moderních prohlížečích, včetně Chrome, Firefox, Safari a Edge.
Proč vypouklý efekt zmizí nebo vypadá špatně na tmavém pozadí?
Vrstva světlého stínu spoléhá na to, že vynikne proti světlejšímu povrchu — na velmi tmavém pozadí se bílý zvýrazňovač může vymýt nebo vypadat obráceně, než byste čekali. Zkuste přepnout text a pozadí na střední šedou, nebo zvyšte krytí světlého stínu, aby 3D iluze zůstala čitelná i na tmavších tématech.
Můžu efekt reliéfu animovat nebo přechodem měnit při najetí myší?
Ano — text-shadow je animovatelný pomocí CSS přechodu, takže můžete plynule přejít z plochého stavu do vypouklého (nebo mezi intenzitami Vypouklý a Vyrytý) při :hover nebo :focus. Zkopírujte vygenerovanou hodnotu stínu jako stav „hover“ a spárujte ji s pravidlem transition: text-shadow 0.2s ease; na základním elementu.
Ovlivňuje posuvník intenzity výkon u velkého množství textu?
Ne — text-shadow je nenáročná vlastnost CSS bez ohledu na intenzitu, protože jde jen o dvě vrstvy stínu počítané stejným způsobem, ať už je posun 1px nebo 6px. Je bezpečné ho použít na nadpisy, tlačítka nebo text bez obav o výkon vykreslování.
Jak dosáhnout dobrého vzhledu efektu s vlastním fontem místo výchozího?
Iluze reliéfu/rytiny se obvykle čte nejjasněji na tučných fontech s tlustým tahem, protože je víc plochy, na které posun stínu zachytí světlo a stín. Tenké fonty mohou efekt učinit slabým nebo nepřehledným — pokud váš vlastní font vypadá nejasně, zkuste tučnější řez nebo mírně zvyšte intenzitu jako kompenzaci.
Můžu použít dvě jiné barvy místo bílé/černé pro světlý a tmavý stín?
Vygenerované CSS je výchozí bod, který si můžete volně upravit — jakmile kód zkopírujete, vyměňte hodnoty rgba(255,255,255,...) a rgba(0,0,0,...) za jakoukoli dvojici barev, například teplé zlaté zvýraznění a tmavě hnědý stín pro vzhled bronzové plakety místo výchozího šedého kovového efektu.