O generátoru stínů
Vlastnost CSS box-shadow přidává stínové efekty kolem rámu elementu. Můžete nastavit více efektů oddělených čárkami, každý s hodnotami offset-x, offset-y, blur-radius, spread-radius a barva.
Syntaxe CSS box-shadow
box-shadow: [inset] offset-x offset-y blur-radius spread-radius barva;
- offset-x / offset-y: Pozice stínu. Kladné hodnoty posouvají vpravo/dolů, záporné vlevo/nahoru.
- blur-radius: Čím větší hodnota, tím větší rozostření. 0 vytváří ostrou hranu.
- spread-radius: Kladné hodnoty rozšiřují stín, záporné ho zmenšují.
- barva: Jakákoliv CSS barevná hodnota. Použijte rgba() pro průhlednost.
- inset: Vykreslí stín uvnitř elementu.
Oblíbené styly stínů
- Měkký/Material: Velké rozostření, nízká průhlednost, mírně záporné šíření pro vznášející se karty.
- Tvrdý: Nulové rozostření vytváří retro efekt plného stínu.
- Neon: 0 posun s barevným stínem a vysokým šířením.
- Vrstvený: Více stínů se zvětšujícím se rozostřením vytváří realistickou hloubku.
Použijte předvolby pro rychlý start a pak doladějte posuvníky pro dokonalý vzhled.