Handytool
FejlesztőknekIngyenesHelyi futtatás

CSS Gradient generátor

Készítsen és exportáljon lineáris és radiális gradienseket az egyéni színmegállókkal.

Előnézet
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Típus
Előbeállítások

Adjon hozzá legfeljebb hat szín megállót, húzza a pozíció csúszkáját és másolja ki a CSS-t.

CSS Gradient generátor – áttekintés

A Handytool gradient generátora lehetővé teszi a színek kombinálását lineáris, radiális és kúpos gradiensekké. Vegyen fel és szerkesszen szín megállókat, állítsa be a szöget és a pozíciót, és tekintse meg az előnézetét azonnal egy méretcsalád eleménél. Exportálja a teljes CSS tulajdonságot, amely készen áll a termelésre, az iránykulcsszavak (to right, to bottom) és a fok szögtámogatása mellett.

CSS Gradient generátor – funkciók

  • 01

    Szabad szín megállók

    Vegyen fel annyi színt amennyire szüksége van, és állítsa be az egyes pozíciókat csúszkával. Automatikusan létrehozza a lineáris eloszlást, ha másképpen nem adja meg.

  • 02

    Gradiens típusok: lineáris, radiális, kúpos

    Váltson a lineáris (egy irány), radiális (központi pontból) és kúpos (pont körüli forgatás) között az összes elképzelhető effektusokhoz.

  • 03

    Előnézet valós elemen

    Tekintse meg a gradiensét egy négyzeten (vagy más aspektusarányban) bármilyen másodlagos háttérrel a kontraszt és az olvashatóság tesztéléhez.

CSS Gradient generátor – GYIK

Melyek az iránykulcsszavak?
Használjon to right, to bottom, to bottom right stb. lineáris gradiensekhez. A fok szögek (45deg) szintén működnek.
Hogyan pozicionálom az megállókat?
Minden megállónak van pozíciója (0% - 100%). A 0% a kezdet, a 100% a vég. Az automatikus interpoláció kitölt a közöttiek között.
Radiális gradiens - mit csinál a position?
A pozíció (center, top, stb.) beállítja, hol kezdődik a sugárzás. Az alakzat (kör vs ellipszis) és méret szabályozza a gradiens szétterjedését.
Használhatok CSS változókat?
Igen. Másolja a generált CSS-t és cserélje le a színeket var(--my-color)-val az átméretezhető komponensekhez témázással.

Kapcsolódó eszközök

Fejlesztőknek →

Fedezz fel más eszközöket

Összes eszköz →