CSS Box Shadow Generator
Vizuálně vytvořte kód CSS box-shadow: posuvníky pro posun, rozostření, roztažení, barvu s neprůhledností, režim vložení a až čtyři vrstvy s živým náhledem.
Výsledek
Deklarace box-shadow má šest pohyblivých částí – X a Y offset, blur, spread, color a volitelné klíčové slovo inset – a jediný způsob, jak je správně nastavit, je vidět je. Tento generátor umístí každou část na posuvník a při tažení vykreslí výsledek na kartu náhledu, takže čára CSS ve spodní části je vždy přesně to, na co se díváte.
Stíny v reálném světě jsou jen zřídka jednou vrstvou. Seznam vrstev vám umožňuje naskládat až čtyři stíny do jedné deklarace: těsná tmavá čára pro definici hran plus široká měkká čára pro elevaci nebo dvojice světlá a tma, která definuje neumorfismus. Vyberte vrstvu, kterou chcete upravit, odstraňte ty, které nepotřebujete, a kombinovaná hodnota box-shadow se aktualizuje živě.
Stíny se čtou 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 před odesláním můžete zkontrolovat oba motivy. Přednastavené stránky pokrývají varianty, které lidé skutečně hledají: jemný elevační stín, vsazená studna, dvouvrstvý recept na neumorfismus a jemný stín karet.
Jako každý nástroj na tomto webu je generátor zdarma a běží výhradně ve vašem prohlížeči: žádné nahrávání, žádný účet a po načtení stránky funguje offline.