Handytool
FejlesztőknekIngyenesHelyi futtatás

Box Shadow generátor

Építse meg és tekintse meg az előnézetét a CSS doboz árnyékoknak réteg után rétegre — másolja egy kattintásra.

Előnézet
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Állítsa be a csúszkákat az árnyék megtervezéséhez — másolja ki a CSS-t, ha jól néz ki.

Box Shadow generátor – áttekintés

A Handytool box shadow generátora segít a tökéletes árnyék felépítésében egy elemhez az X és Y eltolás, blur radius, terjedelem és szín beállításával. Vegyen fel több árnyék réteget, tekintse meg az előnézetét egyidejűleg az testreszabható méret és háttérrel, és másolja a generált CSS-t közvetlenül a stíluslapjába. Minden a böngészőben kerül kiszámításra — nincs szükség kiterjesztésekre vagy fordítókra.

Box Shadow generátor – funkciók

  • 01

    Korlátlan árnyék rétegek

    Vegyen fel annyi árnyékot, amennyire szüksége van, és helyezzen egymásra vesszőkkel az összetett mélység és felület effektusokhoz.

  • 02

    Élő előnézet témákkal

    Válasszon háttérszínt, méretet és szövegstílust, hogy lássa, hogyan néz ki az árnyék egy valódi elemen, bármilyen kontrasztkombinációval.

  • 03

    Tiszta CSS export

    Másolja a teljes box-shadow CSS tulajdonságot, amely készen áll az stílustábla közvetlenül való beillesztésére — nem szükséges előfeldolgozó.

Box Shadow generátor – GYIK

Másolhatom az Chrome DevTools-ból pontosan?
Igen. A DevTools-ból történő másolás egy stílus deklarációt illeszt be, és gondosan feldolgozom az eltolást, blur, terjedelem és színt, hogy közvetlenül a megfelelő értékekhez vezessen.
Mit csinál a spread radius?
A terjedelem sugara megnöveli (vagy csökkenti, ha negatív) az árnyék zónáját a blur alkalmazása előtt. A pozitív értékek nagyobbá teszik az árnyékot; a negatívak az elem méreténél kisebbé.
Támogatja az inset árnyékokat?
Igen. Jelölje be az inset jelölőnégyzetet bármely réteghez az árnyék belsőbe helyezéséhez — tökéletes a depresszióhatásokhoz.
Melyik a sorrend a box-shadow paramétereknek?
offsetX offsetY blurRadius spreadRadius color [inset]. A Handytool mindent rendez az Ön számára.

Kapcsolódó eszközök

Fejlesztőknek →

Fedezz fel más eszközöket

Összes eszköz →