Nástroje pre vývojárov, po ktorých siahate každý deň, všetky na jednom mieste.

Konvertory, formátovače, hashe, validátory a malé utility, ktoré si stále znova otvárate, zostávajú pokope namiesto toho, aby sa strácali medzi kartami.

GitHub

/ Nástroje

■

/ Vyhľadávač nástrojov

109 nástrojov

/ Generátor box-shadow

Predvoľby

Tiene (2/5)

Tieň 1

Vnútorný

Horizontálne: 0px

Vertikálne: 4px

Rozmazanie: 6px

Rozšírenie: -1px

Farba

Priehľadnosť: 10%

Tieň 2

Vnútorný

Horizontálne: 0px

Vertikálne: 2px

Rozmazanie: 4px

Rozšírenie: -2px

Farba

Priehľadnosť: 10%

Pozadie náhľadu

Náhľad

CSS kód

Ľubovoľná hodnota Tailwind

/ Vybraný nástroj

■

Generátor box-shadow - bezplatný generátorový nástroj

Vizuálny generátor CSS box-shadow s podporou viacerých tieňov

■ 01

Čo je CSS box shadow?

CSS vlastnosť box-shadow pridáva tieňové efekty okolo rámu elementu. Môžete nastaviť viacero tieňov oddelených čiarkami. Každý tieň je opísaný horizontálnym a vertikálnym posunom, polomerom rozmazania a rozšírenia, farbou a…

■ 02

Ako to funguje?

Box tiene sú definované niekoľkými hodnotami: horizontálny posun (kladný posúva doprava), vertikálny posun (kladný posúva nadol), polomer rozmazania (väčší znamená viac rozmazania), polomer rozšírenia (kladný rozširuje, záporný zmenšuje) a f…

■ 03

Ukážkové prípady

Pokrýva jemný tieň, stredné vyzdvihnutie a vnútorný tieň, aby ste mohli rýchlo porovnať bežné vstupy a výstupy.

/ Súvisiace nástroje

/ Kód

■

Zdrojový kód vybraného nástroja, zobrazený tu vedľa živej verzie napravo.

/ Zdrojový kód

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;