Box Shadow generátor

Húzza a csúszkákat a box-shadow alakításához, halmozzon fel rétegeket a mélységért, és másolja ki azonnal a kész CSS-kódot.

Árnyékrétegek
Réteg 1
CSS
Állítsa be a csúszkákat az árnyék formálásához.

Minden árnyék renderelése a böngészőjében történik. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire.

GYIK

Mit szabályoz pontosan az eltolás, az elmosás és a terjedés?

Az eltolás (offset) balra/jobbra és fel/le mozgatja az árnyékot, az elmosás (blur) lágyítja a széleit, a terjedés (spread) pedig növeli vagy zsugorítja azt az elmosás előtt. A negatív terjedés befelé húzza az árnyékot, ami szorosan simuló árnyékoknál hasznos.

Mire szolgál az inset opció?

A normál árnyék az elemen kívülre esik, mint a fény egy kiemelkedő kártya mögött. Az Inset (belső árnyék) ezzel szemben befelé fordítja azt, így az elem süllyesztettnek tűnik – ez rendkívül hasznos mélyített beviteli mezőkhöz vagy benyomott gombokhoz.

Miért érdemes egynél több árnyékréteget használni?

Egyetlen árnyék egy bizonyos méret felett laposnak hat. A valósághű mélységérzet általában egy élesebb, sötétebb árnyék és egy lágyabb, szélesebb árnyék kombinációjából adódik – adjon hozzá egy második réteget, és finomítsa őket külön-külön a tökéletes hatás érdekében.

CSS Cubic Bezier generátorHúzza a két fogantyút az átmeneti görbe formálásához, figyelje a pont mozgását a lineárissal szemben, és másolja ki a cubic-bezier() értéket.Színátmenet generátorHozzon létre lineáris, radiális vagy kúpos színátmenetet, adjon hozzá színpontokat, állítsa be az irányt, és másolja ki a CSS-t egyetlen kattintással.Border Radius generátorKerekítse le a sarkokat csúszkákkal, hozzon létre organikus amőba alakzatokat az elliptikus móddal, és másolja ki azonnal a CSS-kódot.Flexbox generátorÁllítson be egy flex konténert és elemeit vizuális vezérlőkkel, kövesse az elrendezés élő változását, és másolja ki a CSS-t egyetlen kattintással.CSS Grid generátorÁllítsa be az oszlopokat és sorokat, húzza végig a kurzort a cellákon az elemek elhelyezéséhez, és másolja ki a grid CSS-t a hozzá tartozó HTML-lel egyetlen kattintással.CSS clamp() kalkulátorAdja meg a kis és nagy képernyőkhöz tartozó méretet, és kapjon egy folyékony clamp() értéket, amely zökkenőmentesen skálázódik a kettő között – betűméretekhez, belső és külső margókhoz vagy résekhez.SzínkonvertálóKonvertáljon színeket HEX, RGB, HSL, HSV, CMYK és LAB formátumok között – szerkesszen bármely mezőt, és a többi automatikusan frissül.CSS Szépítő és TömörítőIgazítsa újra a rendezetlen CSS-t az olvashatóságért, vagy tömörítse az élesítéshez – egy olyan biztonságos móddal, amely soha nem rendezi át a szabályokat.KontrasztellenőrzőAdja meg a szöveg és a háttér színét a WCAG kontrasztarány, valamint az AA és AAA szintek ellenőrzéséhez.