Generátor box-shadow

Čo je tento nástroj?

box-shadow je CSS vlastnosť, ktorá kreslí tieň za (alebo vnútri) elementu. Napísaná ručne vyžaduje až päť hodnôt v poradí — vodorovný posun, zvislý posun, polomer rozostrenia, polomer roztiahnutia a farbu — plus voliteľné kľúčové slovo inset, čo všetko sa dá ľahko popliesť alebo pri prvom pokuse spraviť príliš jemné či príliš ťažké.

Tento nástroj to premieňa na priamu manipuláciu: potiahnite posuvník, sledujte zmenu tieňa v živom náhľadovom boxe a skopírujte presné CSS, keď vyzerá správne. Výber farby spolu s posuvníkom priehľadnosti automaticky vygeneruje správnu hodnotu rgba(), keďže priehľadné tiene väčšinou vyzerajú lepšie ako úplne nepriehľadné.

Prečo ho používať?

• Živý náhľad sa okamžite aktualizuje pri úprave akéhokoľvek ovládača — vidíte presný tieň skôr, ako ho zapíšete do kódu.
• Plná kontrola nad offset-x, offset-y, blur, spread, farbou a priehľadnosťou na jednom mieste.
• Jedno kliknutie pridá inset pre vzhľad stlačenia/vnorenia namiesto plávajúceho vrhaného tieňa.
• Vypisuje CSS pripravené na vloženie s farbou už prevedenou na rgba() pri zvolenej priehľadnosti.
• Beží celé vo vašom prehliadači — nič, čo nastavíte, sa nikam nenahráva.
• Zadarmo, bez registrácie, funguje na mobile.

Ako sa používa

1. Nastavte offset-x a offset-y na umiestnenie tieňa — kladné hodnoty ho posunú vpravo/dole, záporné vľavo/hore.
2. Zvýšte polomer rozostrenia, aby ste zmäkčili okraj tieňa; zvýšte roztiahnutie, aby bol tieň väčší než samotný element.
3. Vyberte farbu a upravte priehľadnosť — najrealistickejšie tiene používajú 15–40 % priehľadnosti namiesto plnej čiernej.
4. Zaškrtnite „inset“, ak chcete, aby sa tieň zobrazil vo vnútri okraja elementu namiesto za ním.
5. Skopírujte vygenerované CSS a vložte ho do svojho štýlu.

Príklad

Vstup

Posun: 0px, 10px · Rozostrenie: 20px · Roztiahnutie: 0px · Farba: čierna pri 35 % priehľadnosti

Výstup

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Mäkký tieň priamo pod elementom bez vodorovného posunu — jeden z najbežnejších štýlov tieňa pre karty a tlačidlá.

Jeden tieň vs. viacvrstvové tiene

Tento nástroj vytvára jednu vrstvu tieňa, čo pokrýva prevažnú väčšinu reálneho použitia — tlačidlá, karty, modálne okná a rozbaľovacie ponuky takmer vždy používajú jeden tieň. CSS podporuje aj viaceré tiene oddelené čiarkami na tom istom elemente pre prepracovanejšie efekty hĺbky (napríklad tesný tmavý tieň vrstvený pod mäkkým, širokým), ale to je vylepšenie, ktoré môžete pridať ručne: vygenerujte jeden tieň tu, potom riadok zduplikujte, upravte druhú sadu hodnôt a spojte ich čiarkou.

Bežné vzory box-shadow

• Jemné nadvihnutie karty: malý posun (0–4px), stredné rozostrenie (8–16px), 10–20 % priehľadná čierna.
• Vyvýšené modálne okno/rozbaľovacia ponuka: väčší posun (4–10px) a rozostrenie (20–30px), 20–35 % priehľadnosť pre silnejší pocit plávania.
• Stlačené/vnútorné tlačidlo: zaškrtnite inset, použite mierne „záporný“ posun a stredné rozostrenie, aby tieň pôsobil ako preliačina, nie nadvihnutie.
• Farebná žiara: namiesto čiernej vyberte farbu značky, zvýšte priehľadnosť na 40–60 % a mierne zvýšte roztiahnutie pre mäkký efekt žiary okolo tlačidiel.
• Ostrý/tvrdý tieň: nastavte rozostrenie na 0 a roztiahnutie na 0 pre plnú, posunutú siluetu namiesto mäkkého tieňa.

Kombinácia so zaoblenými rohmi

Tiene a zaoblené rohy sa používajú spolu neustále — karty, tlačidlá a modálne okná takmer vždy kombinujú oboje. Použite Generátor border-radius na zaoblenie rohov toho istého elementu a potom aplikujte obe vygenerované CSS deklarácie spolu.

→ Generátor border-radius · Prevodník jednotiek

Časté otázky