CSS színátmenet-generátor

Ez a CSS színátmenet-generátor lineáris és sugaras színátmeneteket épít az általad vezérelt színpontokból, élő előnézettel és beillesztésre kész háttérdeklarációval. Húzd a színpontokat a sávon, állítsd be a szöget vagy az alakot, és a CSS azonnal frissül.

Minden a böngésződben fut az általad választott színekből és beállításokból, így semmi nem töltődik fel, az eredményt pedig kimásolhatod és offline is használhatod.

A lineáris színátmenet egy egyenes mentén olvasztja össze a színeket, az irányát pedig a szög adja meg: a 0 fok felfelé, a 90 fok jobbra, a 180 fok lefelé mutat. A sugaras színátmenet a középpontból kifelé olvad, körként vagy ellipszisként.

Mindkettő szabványos CSS-érték, linear-gradient() és radial-gradient() alakban írva, és mindkettő ugyanazt a színpontlistát használja, tehát a típus váltása megtartja a színeidet, és csak azt változtatja meg, hogyan terülnek szét.

Minden színpont egy szín, amely 0% és 100% közötti pozícióban helyezkedik el. A színátmenet lágyan olvad a szomszédos pontok között, tehát egy pont pozíciója szabja meg, hol a legerősebb a színe, és milyen gyorsan olvad a következőbe.

Adj hozzá annyi pontot, amennyi többszínű színátmenethez kell, húzd őket az olvadás finomhangolásához, vagy kattints a sávra, hogy oda tegyél új pontot, ahová szeretnéd. Egy színátmenethez legalább két pont kell.

Másold ki a létrehozott kódot, és illeszd be bármelyik elem hátteréül, például egy szakaszéul, kártyáéul vagy gombéul. A modern böngészők gyártói előtag nélkül támogatják a linear-gradient és a radial-gradient értéket, tehát az érték úgy működik, ahogy van.

Mivel a színátmenet csupán egy érték, mindenhol használhatod, ahol háttérképet várnak, ráteheted egy tömör színre tartalékként, vagy ugyanazokat a színpontokat használhatod egy lineáris és egy sugaras változatban is az egységes megjelenésért.