Ingyenes konverter

CSS Gradiens Generátor

Vizuálisan generáljon CSS-gradienseket élő előnézettel. Hozzon létre lineáris, sugárirányú és kúpos színátmeneteket egyéni színmegállókkal – ingyenes és ügyféloldali.

Élő előnézet
CSS kimenet
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Szög (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Az eszközről

Hozzon létre gyönyörű CSS lineáris és radiális színátmeneteket egy vizuális szerkesztővel. Válasszon színeket, állítsa be a megállókat, változtassa meg az irányt vagy a szöget, és nézze meg az élő előnézeti frissítést valós időben. Másolja ki a generált CSS-kódot – beleértve a régebbi böngészők gyártói előtagjait –, és illessze be közvetlenül a stíluslapjába.

Használati útmutató

  1. Válassza ki a színátmenet típusát: lineáris vagy radiális.
  2. Színmegállók hozzáadásához kattintson a színátmenet sávra, és válassza ki a színeket.
  3. Állítsa be a gradiens szögét (lineáris) vagy pozícióját (radiális) a vezérlők segítségével.
  4. Másolja ki a generált CSS-kódot a kimeneti panelről.

Gyakran ismételt kérdések

Minden böngészőben működnek a CSS gradiensek?
A modern CSS gradienseket (lineáris gradiens, radiális gradiens) minden jelenlegi böngésző támogatja, beleértve a Chrome-ot, a Firefoxot, a Safarit és az Edge-t. Az eszköz opcionálisan -webkit- előtagokat generálhat a régebbi böngészőverziókhoz.
Létrehozhatok többszínű színátmeneteket?
Igen. Adjon hozzá annyi színt, amennyire szüksége van. Beállíthatja az egyes ütközők helyzetét is, hogy szabályozza a színek keveredésének helyét. Ez lehetővé teszi az összetett szivárvány-, naplemente- vagy egyéni márka színátmeneteket.
Mi a különbség a lineáris és a radiális gradiens között?
A lineáris színátmenetek a színeket egyenes vonal mentén (fentről lefelé, balról jobbra, átlósan vagy bármilyen szögben) helyezik át. A sugárirányú színátmenetek körkörös vagy ellipszis alakúak a középpontból kifelé helyezik át a színeket.
Használhatom a színátmenetet szöveg háttereként?
Igen. Használja a background-clip: szöveget a -webkit-text-fill-color: átlátszóval a színátmenet szövegre való alkalmazásához. Az előállított CSS biztosítja a színátmenet definícióját – kombinálja ezekkel a tulajdonságokkal a színátmenet szövegéhez.