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.
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.
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.
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.