Generator sjena (Box Shadow)

Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.

Slojevi sjene
Sloj 1
CSS
Prilagodite klizače kako biste oblikovali sjenu.

Svaka se sjena iscrtava u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Što točno kontroliraju offset, blur i spread?

Pomak (offset) pomiče sjenu lijevo/desno i gore/dolje, zamućenje (blur) omekšava njezine rubove, a širenje (spread) je povećava ili smanjuje prije zamućenja. Negativno širenje uvlači sjenu unutra, što je korisno za usku, blisku sjenu.

Što radi opcija inset?

Normalna sjena pada izvan elementa, poput svjetla iza podignute kartice. Opcija "Inset" okreće sjenu prema unutra, pa element izgleda utisnuto — što je korisno za udubljena polja za unos ili pritisnute gumbe.

Zašto slagati više od jednog sloja sjene?

Jedna sjena iznad određene veličine izgleda ravno. Stvarna elevacija obično kombinira usku, tamnu sjenu s mekom, širom sjenom — dodajte drugi sloj i prilagodite svaki zasebno kako biste postigli taj učinak.

CSS Cubic Bezier GeneratorPovucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.Generator gradijenataIzgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.Generator zaobljavanja kutova (Border Radius)Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.Flexbox generatorPostavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.CSS clamp() kalkulatorUnesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Pretvarač bojaPretvorite boje između formata HEX, RGB, HSL, HSV, CMYK i LAB — uredite bilo koje polje i ostala se ažuriraju u hodu.CSS uljepšivač i minifikatorPonovno uvucite neuredan CSS radi lakšeg čitanja ili ga minificirajte za objavu — uz siguran način koji nikada ne mijenja redoslijed pravila.Provjera kontrastaUnesite boju teksta i pozadine kako biste vidjeli WCAG omjer kontrasta i koje razine AA i AAA prolaze.