Pri pridávaní jemnej elevation pre card komponent. Pri reprodukcii Material Design alebo iOS-like tieňa. Layered shadow pre realistickejší vizuál (multiple layers s rôznym blur). Inset tieň pre dojem „vsadenia" elementu (napr. input field).

Blur ≠ spread. Blur jemne rozmazáva tieň. Spread rozširuje (alebo zmenšuje pri zápornej hodnote) plochu tieňa pred blurom. Veľký blur je drahý. Na mobile sa silne rozmazaný tieň môže prejaviť na výkone počas scrollu. Z-fighting na hraniciach. Pri tmavom pozadí použij svetlejší alebo polopriehľadný tieň. Inset vs. outset. inset kľúčové slovo prepne tieň dovnútra elementu. Multi-layer poradie. Prvý tieň v zozname kreslí nad ostatnými — poradie záleží.

Generátor CSS box-shadow

Postav single alebo multi-layer CSS box shadows vizuálne. Uprav offset, blur, spread, farbu a skopíruj CSS.

Shadow layers

Preview

Sample

CSS

Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu

Načo to slúži?

CSS box-shadow má syntax offset-x offset-y blur spread color a môže byť multi-layer (cez čiarku zoznam tieňov). Vizuálne ladiť tieto čísla v editore je únavné. Tento generátor ti dá slidery na offset, blur, spread a color picker — nakoniec skopíruješ CSS, čo môžeš rovno vložiť.

Kedy to použiť

Pri pridávaní jemnej elevation pre card komponent.
Pri reprodukcii Material Design alebo iOS-like tieňa.
Layered shadow pre realistickejší vizuál (multiple layers s rôznym blur).
Inset tieň pre dojem „vsadenia" elementu (napr. input field).

Časté chyby

Blur ≠ spread. Blur jemne rozmazáva tieň. Spread rozširuje (alebo zmenšuje pri zápornej hodnote) plochu tieňa pred blurom.
Veľký blur je drahý. Na mobile sa silne rozmazaný tieň môže prejaviť na výkone počas scrollu.
Z-fighting na hraniciach. Pri tmavom pozadí použij svetlejší alebo polopriehľadný tieň.
Inset vs. outset. inset kľúčové slovo prepne tieň dovnútra elementu.
Multi-layer poradie. Prvý tieň v zozname kreslí nad ostatnými — poradie záleží.