tigtools

CSS színátmenet-generátor

Válasszon színeket és pozíciókat, adja meg a színátmenet típusát, majd másolja a használatra kész CSS-kódot.

Böngészőben fut Regisztráció nélkül

Típus
135°
Színpontok
  1. Színpont 1
    #0b5d1e
    0%
    100%
  2. Színpont 2
    #f2c14e
    100%
    100%
Egy színátmenet itt 2–6 színpontból áll.

Használata

  1. Válasszon lineáris, radiális vagy kúpos átmenetet, majd adja meg a szöget vagy a középpont helyzetét.
  2. Adja meg minden színpont színét, átlátszatlanságát és helyzetét. Legfeljebb hat színpontot adhat hozzá, a feleslegeseket pedig eltávolíthatja.
  3. Ellenőrizze az előnézetet, majd másolja a CSS-sort a stíluslapjába.

Hogyan működik

A kimenet egy szabványos CSS-háttérdeklaráció. A lineáris gradiensek egy szög mentén futnak: a 0deg alulról felfelé, a 90deg balról jobbra, a 180deg felülről lefelé halad. A radiális gradiensek egy középpontból kiindulva körként vagy a dobozhoz illeszkedő ellipszisként terülnek szét. A konikus gradiensek egy középpont körül söpörnek végig, a kiválasztott szögből indulva; ez tortaszerű hatásokhoz és színkörökhöz hasznos.

A színpontok a pozíciójuk sorrendjében szerepelnek, így a pozíciók szabadon húzhatók. A csökkentett átlátszatlanságú színpont rgba() formában jelenik meg, ami átengedi a hátteret. Két azonos pozíciójú színpont lágy átmenet helyett éles váltást hoz létre; így készülnek a csíkok.

Mindhárom gradiensfüggvény minden jelenlegi böngészőben működik. A gradiensek alapértelmezés szerint az sRGB színtérben keverednek, ami a kiegészítő színek között (például kék és sárga) kissé szürkésnek tűnhet; egy közbülső, élénkebb színű színpont hozzáadása ezt elkerüli.

Példák

Finom fejléc-háttér

A linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) lágy, felülről lefelé haladó átmenetet hoz létre, amely mellett a sötét szöveg olvasható marad.

Éles szélű csíkok

Használjon négy színpontot: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. A két 50%-os színpont átmenet nélkül találkozik, így két tömör fél jön létre.

Reflektorfény-hatás

A radiális színátmenet (kör a bal felső sarokban) az rgba(255, 255, 255, 0.6) színtől az rgba(255, 255, 255, 0) színig, egy szín fölé rétegezve lágy fényt ad a sarokban.

Gyakori kérdések

Milyen irányba mutat a 0deg?

A CSS-ben a 0deg felfelé mutat, így a színátmenet alulról indul, és felül ér véget. A 90deg balról jobbra halad. Ez eltér néhány tervezőalkalmazástól, ahol a 0° gyakran balról jobbra haladást jelent.

Használhatom a színátmenetet szövegen?

Igen: alkalmazza a hátteret, majd adja hozzá a background-clip: text és a color: transparent szabályokat. Ellenőrizze, hogy a szöveg a színátmenet minden pontján olvasható marad az oldalon.

Kellenek-e a böngésző-előtagok, például a -webkit-linear-gradient?

Nem. A jelenlegi böngészők támogatják az előtag nélküli szintaxist. Az előtagokra csak sok évvel ezelőtti böngészőknél van szükség.

Adatvédelem

Minden az Ön böngészőjében jön létre. A színeit és beállításait nem küldjük el és nem tároljuk.