Színátmenet generátor

Hozzon 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.

Színátmenet típusa
Színpontok
CSS
Állítsa be a színpontokat és az irányt a színátmenet formálásához.

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

GYIK

Mi a különbség a lineáris, radiális és kúpos színátmenetek között?

A lineáris színátmenet egy egyenes vonal mentén mossa össze a színeket, amelyet egy szög megadásával irányíthat. A radiális színátmenet a középpontból kifelé haladva, kör vagy ellipszis alakban teríti szét őket. A kúpos (conic) színátmenet pedig a középpont körül söpör végig, mint egy színkör.

Mik azok a színpontok (color stops)?

Minden színpont egy adott pozícióhoz rögzített szín a színátmenet mentén – 0% a kezdet, 100% a vég. Mozgassa a színpontot a szín csúcspontjának eltolásához, vagy adjon hozzá további pontokat a gazdagabb keverékért. Legfeljebb nyolc pontot használhat.

Hogyan szabályozhatom az irányt?

Lineáris vagy kúpos (conic) színátmenetnél a szögcsúszka határozza meg az irányt – a 0° felfelé mutat, a 90° pedig jobbra. A radiális színátmenetnek nincs szöge; helyette válasszon kör vagy ellipszis alakot a terjedés módosításához.

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.Box Shadow generátorHú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.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.