CSS-színátmenet-generátor
CSS háttérszínátmenetek tervezése a szintaxis memorizálása nélkül. Váltson a lineáris és a radiális típusok között, állítson be egy szöget a lineáris gradiensekhez (fok), és válassz két színütközőt 0% és 100% között. Az előnézet azonnal frissül; másold a teljes hátteret vagy a háttér-kép deklarációt a stíluslapjába. Támogatja a HEX színbevitelt érvényesítéssel.
Szög (°)
Szín 1
Szín 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Gradiens felépítése
1. Válassz lineáris vagy radiális színátmenetet.
2. Lineáris esetén állítsd be a szöget fokban (0 = alulról felfelé, 90 = balról jobbra).
3. Add meg a kezdő és a vég színét (HEX).
4. Másold a CSS-t az eredménykártyáról a projektbe.
Példák színátmenetre
Lineáris hős szalaghirdetés (135 fok)
A #6F9B96 kékeszöld színe az őszibarack #E8C4B8 színig 135°-ban — ez az átló gyakori a céloldal fejlécében. Használd háttérként egy teljes szélességű szakaszon.
Radiális reflektorfény
Radiális típus világos középponttal és sötét éllel — matricát szimulál: radiális gradiens (kör, #fff 0%, #333 100%).
Függőleges fakulás (180 fok)
180-as szög a fentről lefelé történő halványításhoz a márkaszínről fehérre — hasznos a navigációs sávok mögött.
Mikor használd ezt az eszközt
• Amikor UI hátterek prototípusát készíti, és azonnali vizuális visszajelzést szeretnél.
• Amikor elfelejti, hogy a 90 fokos bal alsó szög vagy a felső futás.
• Ha másolás-beillesztés CSS-re van szüksége a CodePenhez, a Tailwind tetszőleges értékeire vagy a tervezési átadásra.
Mikor válassz mást
• Ha kettőnél több színmegállóra van szüksége, bővítse ki a másolt CSS-t manuálisan, vagy használjon tervezőalkalmazást.
• Amikor nem kívánja a gradienseket. itt.
• Ha automatikus sötét módú változatokra van szüksége — duplikálja és állítsd be a színeket külön.
A színleállítások részletesen
A megálló színt és opcionális pozíciót jelent: #ff0000 0%, #00000ff%.5%, #00000ff. A böngésző interpolálja az RGB-t a megállások között. A középső megállók sávos naplementét vagy több márkát tartalmazó csíkokat hoznak létre. Kezdje itt két megállóval, majd illessze be és illessze be a harmadik állomást a devtoolsba, amíg megfelelőnek tűnik.
Lineáris színátmeneti szögek
A CSS az óramutató járásával megegyező irányban méri a szögeket „felfelé” (0 fok). Ez eltér a matematikaórától, ahol a szögek gyakran jobbról indulnak. Ha egy színátmenet rosszul van elforgatva, adjon hozzá vagy vonjon ki 90 fokot. Használd a devtools élő szerkesztést ezzel a generátorral a finomhangoláshoz.
Teljesítmény és tartalékok
A gradiensek GPU-barátak a modern böngészőkben. Nagyon régi kliensek esetén állítson be egy szilárd háttérszínt a világosabb végszínre a gradiens vonal előtt.
Gyakori kérdések
Mi a CSS szintaxisa a lineáris színátmenethez?
háttér: linear-gradient(angle, color1 0%, color2 100%); A szög fokban van megadva; a színek megállók a vonal mentén.
Hogyan működnek a színmegállók?
A megállók jelölik az egyes színek helyét a színátmenet vonalán. 0% a kezdet, 100% a vége. Ez az eszköz két ütközőt rögzít; adjon hozzá többet a szerkesztőben, ha szükséges.
Lineáris vs. radiális?
Lineáris keverés egy egyenes vonal mentén. A középpontból kifelé sugárzik — jó körök és lágy pontok esetén.
Mely szögértékek gyakoriak?
0 fok felfelé, 90 fok jobbra, 180 fok lefelé, 135 fok átlós — közös a kártyák és hősök esetében.
Melyik szögértékek gyakoriak? background-image?
A kimenet a legtöbb div-hez megfelelő háttér gyorsírást használ; hátterű képre osztható, ha felülír más rétegeket.
Küldnek színeket a szerverre?
Nem. Az előnézet helyben jelenik meg.
Ingyenes?
Igen. Használd fiók nélkül és korlátlanul.