Generátor CSS box-shadow
Vytvářejte CSS kód box-shadow vizuálně: posuvníky pro odsazení, rozostření, roztažení, barvu s průhledností, režim vnitřního stínu a až čtyři vrstvy s živým náhledem.
🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.
Výsledek
Deklarace box-shadow má šest pohyblivých částí – X a Y odsazení, rozostření, roztažení, barvu a volitelné klíčové slovo inset – a jediný způsob, jak je správně nastavit, je vidět je. Tento generátor dává každou část na posuvník a při tažení vykresluje výsledek na náhledové kartě, takže CSS řádek dole je vždy přesně tím, na co se díváte.
Skutečné stíny jsou zřídkakdy jednovrstvé. Seznam vrstev umožňuje skládat až čtyři stíny do jedné deklarace: úzkou tmavou linku pro definici hrany plus široký měkký přechod pro hloubku, nebo světle-tmavý pár definující neumorfismus. Vyberte vrstvu pro úpravu, odstraňte ty, které nepotřebujete, a kombinovaná hodnota box-shadow se aktualizuje živě.
Stíny působí velmi odlišně na tmavých rozhraních, kde černý stín na téměř černé stránce jednoduše zmizí. Přepínač pozadí náhledu přepíná pozadí mezi světlým a tmavým, takže můžete oba motivy zkontrolovat ještě před nasazením. Stránky předvoleb pokrývají varianty, které lidé skutečně hledají: jemný stín pro vystoupení, vnitřní prohlubeň, dvouvrstvý neumorfní recept a jemný stín karty.
Stejně jako každý nástroj na tomto webu je generátor zdarma a běží zcela ve vašem prohlížeči: žádné nahrávání, žádný účet a po načtení stránky funguje i offline.