Jak použít
- Nastavte směr stínu v polích Vodorovný posun a Svislý posun.
- Upravte Rozostření a Roztažení podle živého náhledu.
- Vyberte odstín v poli Barva a nastavte Neprůhlednost.
- Zkopírujte kód tlačítkem Kopírovat CSS, nebo jen hodnotu tlačítkem Kopírovat hodnotu. Zkratka Ctrl/Cmd+Shift+C funguje, když není vybraný žádný text.
Příklady
Jemný stín produktové karty
Vstup
Vodorovný posun 0 · Svislý posun 8 · Rozostření 24 · Roztažení 0 · Barva #2451E8 · Neprůhlednost 0.35
Výstup
box-shadow: 0 8px 24px 0 rgba(36, 81, 232, 0.35);
Dvě vrstvy stínu pro panel
Vstup
První vrstva: posun 0 a 2 px, rozostření 4 px, roztažení −2 px. Druhá vrstva: posun 0 a 4 px, rozostření 6 px, roztažení −1 px. Obě černé s neprůhledností 0.1.
Výstup
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Ostrý stín výrazného tlačítka
Vstup
Vodorovný posun 6 · Svislý posun 6 · Rozostření 0 · Roztažení 0 · Barva #172554 · Neprůhlednost 1
Výstup
box-shadow: 6px 6px 0 0 rgba(23, 37, 84, 1);
Tipy
- Barvu stínu vyberete v nástroji HTML barvy a kódy barev.
- Zkombinujte s gradientovým pozadím z nástroje Generátor CSS gradientu.
Časté dotazy
Jak přidat více stínů k jednomu prvku?
Použijte + Přidat vrstvu; vytvořit můžete až čtyři vrstvy. První vrstva se vykresluje navrchu. Pořadí změníte tlačítky ↑ Posunout nahoru a ↓ Posunout dolů.
Jak vytvořit vnitřní stín v CSS?
Zaškrtněte Vnitřní (inset) u vybrané vrstvy. Tato vrstva se vykreslí uvnitř prvku a v CSS dostane klíčové slovo inset.
Proč ve zkopírovaném CSS chybí barva pozadí a zaoblení?
Barva prvku, Pozadí a Zaoblení mění pouze náhled. Výstup obsahuje jen deklaraci box-shadow.
Proč pole Barva hlásí chybu?
Zadejte hexadecimální barvu ve formátu #RGB nebo #RRGGBB; znak # můžete vynechat. Názvy barev, rgb(), hsl() ani hexadecimální zápis s alfa kanálem nejsou podporované. Průsvitnost stínu nastavíte v poli Neprůhlednost. Při chybě zůstává v náhledu i v CSS poslední platný stín.