DevTulz Online

CSS Box Shadow Generator

Pozadina

Što je CSS Box Shadow?

CSS svojstvo box-shadow dodaje efekte sjene oko okvira elementa. Sjene se mogu pomicati, zamućivati, širiti, bojiti i postaviti kao inset (unutarnja sjena). Više sjenki odvojenih zarezima može se slagati za bogate efekte. Ovaj generator vam omogućuje vizualno izgradnju složenih višeslojnih sjenki i kopiranje CSS-a spremnog za lijepljenje u međuspremnik.

Kako koristiti Box Shadow Generator

  1. Prilagodite klizače za Offset X/Y, Blur i Spread za postavljanje i oblikovanje sjene.

  2. Kliknite na uzorak boje za odabir boje sjene i koristite klizač Opacity za prozirnost.

  3. Uključite 'Inset' za stvaranje unutarnjeg sjaja ili efekta pritisnutosti.

  4. Kliknite '+ Dodaj sloj' za slaganje više sjenki jedne na drugu.

  5. Kopirajte generirani CSS i zalijepite ga u svoju stilsku datoteku.

Često postavljana pitanja

Koja je razlika između box-shadow i drop-shadow filtera? box-shadow dodaje sjene oko pravokutnog okvira elementa i podržava unutarnje sjene. CSS filter: drop-shadow() primjenjuje se na vizualni oblik elementa (uključujući prozirnost), što ga čini da prati nepravokutne konture poput PNG-a s prozirnom pozadinom.

Kako mogu stvoriti Material Design efekt dizanja kartice? Naslagajte dvije box sjene: mekanu ambijentnu sjenu (veliki blur, niska neprozirnost, blago proširenje) i ključnu sjenu (manji blur, viša neprozirnost, usmjereni pomak). Na primjer: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Utječe li box-shadow na raspored stranice? Ne. box-shadow ne utječe na veličinu ili položaj elementa u toku dokumenta. Za razliku od outline, ne zauzima prostor rasporeda i neće gurnuti druge elemente.

Mogu li animirati box-shadow? Da. box-shadow se može animirati s CSS prijelazima i animacijama. Za performanse, radije prijeđite na box-shadow samo kada je potrebno — preglednici ne mogu ubrzati promjene box-shadow s GPU-om onako kako čine za transform ili opacity.

Keywords: CSS box shadow generator, box-shadow CSS, CSS alat za sjenu, CSS drop shadow, unutarnja sjena, višeslojna sjena, CSS shadow online