0

CSS Box Shadow Generator

Vizuálne vytvorte kód box-shadow CSS: posuvníky pre posun, rozmazanie, roztiahnutie, farbu s nepriehľadnosťou, režim vkladania a až štyri vrstvy so živým náhľadom.

0px
4px
12px
0px
0.25
Spracovanie... 0%

Výsledok

Deklarácia box-shadow má šesť pohyblivých častí – odsadenie X a Y, rozostrenie, roztiahnutie, farba a voliteľné kľúčové slovo inset – a jediný spôsob, ako ich správne nastaviť, je vidieť ich. Tento generátor umiestni každú časť na posúvač a pri ťahaní vykreslí výsledok na karte ukážky, takže riadok CSS v spodnej časti je vždy presne to, na čo sa pozeráte.

Tiene v reálnom svete sú len zriedka jednou vrstvou. Zoznam vrstiev vám umožňuje naskladať až štyri tiene v jednej deklarácii: úzka tmavá čiara pre definíciu okrajov plus široká mäkká čiara pre eleváciu alebo dvojica svetlá a tma, ktorá definuje neumorfizmus. Vyberte vrstvu, ktorú chcete upraviť, odstráňte tie, ktoré nepotrebujete, a kombinovaná hodnota box-shadow sa aktualizuje naživo.

Tiene sa čítajú úplne inak na tmavých rozhraniach, kde čierny tieň na takmer čiernej stránke jednoducho zmizne. Prepínač pozadia náhľadu prepína pozadie medzi svetlým a tmavým, takže si môžete pred odoslaním skontrolovať oba motívy. Prednastavené stránky pokrývajú varianty, ktoré ľudia skutočne hľadajú: jemný elevačný tieň, vložená jamka, dvojvrstvový recept na neumorfizmus a jemný tieň karty.

Ako každý nástroj na tejto stránke, generátor je bezplatný a beží výhradne vo vašom prehliadači: žiadne nahrávanie, žiadny účet a po načítaní stránky funguje offline.