Ugrás a fő tartalomra
LibraTool logoLibraTool

Ingyenes CSS átmenetgenerátor

Hozz létre lineáris, sugárirányú és kúpos CSS átmeneteket élő előnézettel. Másold a CSS-t egyetlen kattintással.

Betöltés után offline is működik
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Elkerüli a szürke köztes pontokat nagyon eltérő színek között. Egy sima sRGB sort ad tartaléknak a régebbi böngészőkhöz.

0%
100%

Előbeállítások

Gyakori felhasználások

  • Gradiensek létrehozása hős szakaszokhozTeljes oldal gradiens háttérképek tervezése webhelyünk hős szakaszaihoz és cél oldalaira.
  • Gradiens gombok és CTA-k létrehozásaFeltűnő gradiens gombháttérképek tervezése cselekvésre való felhívások számára, amelyek kiemelkednek.
  • Gradiens háttérképek létrehozása kártyákhozGradiens kitöltések tervezése kártyákat, modális ablakokat, oldalsávokat és UI-komponens háttérképeket számára.
  • Gradiensek létrehozása közösségi média grafikáhozÉlénk gradiens háttérképek tervezése Instagram-posztokhoz, YouTube-bélyegekhez és Twitter-kártyákhoz.
  • Színskálák létrehozása diagramokhozGradiens színskálák létrehozása hőtérképekhez, haladási sávokhoz és adatvizualizációhoz.

Hogyan működik

A gradiens-generátor közvetlenül a böngészőben építi fel a CSS gradiens-karakterláncokat — nincs könyvtár, nincs szerver, nincs feltöltés. Egy kézzel írt függvény valós időben összeállítja a helyes linear-gradient, radial-gradient vagy conic-gradient szintaxist az Ön színmegállóiból és szögéből, majd formázza az eredményt bármely kiválasztott kimeneti célra.

  1. 1
    Konfigurálja a megállókat és az irányt
    Beállít 2 és 6 közötti színmegállót a böngésző natív színválasztójával, majd minden megállót elhelyez a 0–100%-os tengelyen egy tartomány-csúszkával. Lineáris és kúpos gradiensekhez szöget is választ (0–360°); sugárirányú gradiensekhez az alakot (ellipszis vagy kör) és a méret-kulcsszót választja, amely szabályozza, mennyire terjed ki a gradiens.
  2. 2
    A buildCss összeállítja a gradiens-karakterláncot
    Minden változáskor egy helyi buildCss függvény összefűzi paramétereit a helyes CSS függvényhívásba — pl. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nincs érintett könyvtár; a karakterlánc egyszerű JavaScript sablonlogikával épül fel, és közvetlenül a megálló-tömbből fűzi össze.
  3. 3
    Élő előnézet inline stílussal renderelve
    Az összeállított gradiens-karakterlánc közvetlenül egy div elemre kerül alkalmazásra inline háttérstílusként, így a böngésző saját CSS-motorja rendereli az előnézetet. Nincs canvas vagy kép érintve — amit lát, az szó szerint a CSS tulajdonság, amely alkalmazva van.
  4. 4
    Másolásra kész kimenet négy formátumban
    Egy formátumválasztó ugyanazt a gradiens-karakterláncot egyszerű CSS-sé (background: ...), egy CSS-szilárd-tartalékkal ellátott blokká, egy Tailwind tetszőleges-érték osztállyá vagy egy SCSS változó-deklarációvá alakítja. A Másolásra kattintás a kiválasztott kimenetet a vágólapra írja a navigator.clipboard.writeText-en keresztül. Az aktuális gradiens az URL hash-be is kódolásra kerül, így könyvjelzőzheti vagy megoszthatja.

Kapcsolódó eszközök

🟦

CSS Grid generátor

Vizuálisan tervezzen meg egy CSS gridot — sávok, egységek és hézagok — és másolja ki a generált CSS-t és HTML-t.

Próbálja ki
↔️

CSS Flexbox generátor

Kísérletezzen a flex iránytal, becsomagolással, igazítással és helyzeti értékekkel az élő elemeken — és másolja ki a CSS-t.

Próbálja ki
🧮

Mátrix-számológép

Mátrixok összeadása, kivonása, szorzása, transzponálása, invertálása és redukálása, valamint determináns, rang, sajátértékek és Ax = b megoldása — legfeljebb 8×8-ig, egy érintéssel másolható. Ingyenes és privát.

Próbálja ki

Gyakran ismételt kérdések