CSS-gradient
Skapa mjuka linjÀra och radiala gradienter med flera fÀrgstopp och kopiera den fÀrdiga CSS-gradientkoden direkt in i din stilmall för din webbplats eller app.
Förhandsvisning
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);InstÀllningar
Skapa mjuka linjÀra och radiala gradienter med flera fÀrgstopp och kopiera den fÀrdiga CSS-gradientkoden direkt in i din stilmall för din webbplats eller app.
CSS-gradient visar bara kontroller och resultat som hör till funktionen. TillgÀngliga alternativ beror pÄ verktyget och indata.
Format som stöds
SĂ„ fungerar det
Steg 1
Ăppna CSS-gradient och förbered den indata som grĂ€nssnittet efterfrĂ„gar
Steg 2
Justera de synliga kontrollerna för önskat resultat
Steg 3
Kontrollera resultatet innan du kopierar, exporterar eller ÄteranvÀnder det
Vanliga misstag att undvika
- UtgÄ inte frÄn att ett format eller alternativ stöds om det inte visas i grÀnssnittet.
- Kontrollera vÀrdena innan de anvÀnds i en grafisk profil, ett grÀnssnitt eller en produktionsfil.
- NÀr resultatet anvÀnds för text eller UI bör Àven kontrasten kontrolleras.
Proffstips
- Spara kÀllvÀrdet tillsammans med resultatet nÀr du jÀmför varianter.
- AnvÀnd de format som verktyget faktiskt visar i stÀllet för att uppskatta konverteringar.
- PÄ mobil och surfplatta bör text och kontroller fÄ radbrytas.
Databehandling
Databehandlingen beror pÄ vilken funktion som anvÀnds. Samtycke, analys och kontofunktioner pÄ webbplatsen Àr separata frÄn fÀrgoperationen.
Vad verktyget gör
Skapa mjuka linjÀra och radiala gradienter med flera fÀrgstopp och kopiera den fÀrdiga CSS-gradientkoden direkt in i din stilmall för din webbplats eller app. CSS-gradient hÄller sig till denna uppgift och antyder inte funktioner som inte visas i grÀnssnittet. AnvÀnd de tillgÀngliga kontrollerna för önskat resultat och kontrollera de visade vÀrdena innan du för över dem till ett annat verktyg, en stilmall, en designfil eller ett dokument.
Förbered anvÀndbar indata
Börja med den indata som CSS-gradient efterfrÄgar: fÀrg, vÀrde, bild eller instÀllning beroende pÄ skÀrmen. Formaten som anges pÄ denna sida Àr CSS, Tailwind, SCSS, Linear, Radial, Conic. Om ett format eller alternativ inte visas i grÀnssnittet bör det inte betraktas som stöd för just denna funktion.
LĂ€s och kontrollera resultatet
LÀs resultatet i sammanhanget för den operation du utförde. JÀmför det med kÀllvÀrdet och gÄ igenom de instÀllningar som pÄverkade berÀkningen. För viktigt visuellt arbete bör resultatet ocksÄ kontrolleras i det faktiska grÀnssnitt dÀr det ska anvÀndas.
AnvÀndning pÄ mobil och surfplatta
CSS-gradient anvÀnder webbplatsens responsiva layout. Rubriker, undertexter, breadcrumbs och kontroller kan radbrytas pÄ smala skÀrmar sÄ att lÄnga översÀttningar inte klipps. Kontrollera ÀndÄ slutresultatet pÄ den enhet och i det sammanhang dÀr du tÀnker anvÀnda det.
à teranvÀnd resultatet i projektet
Efter kontroll bör du bara anvÀnda de ÄtgÀrder som CSS-gradient faktiskt erbjuder, till exempel kopiering eller export nÀr de finns. Spara kÀllvÀrdet om instÀllningen behöver Äterskapas och dokumentera Àven fÀrgens roll och kontrastkrav vid grÀnssnittsarbete.
Relaterade verktyg
Guider och handledningar
LÀr dig hur du anvÀnder vÄra verktyg med vÄra detaljerade guider.
css-gradient: praktisk guide för gradients
Lokaliserad guide för att anvÀnda css-gradient, förstÄ bÀsta praxis för gradients och undvika vanliga misstag.
css-gradient: praktisk guide för gradients
Lokaliserad guide för att anvÀnda css-gradient, förstÄ bÀsta praxis för gradients och undvika vanliga misstag.
css-gradient: praktisk guide för gradients
Lokaliserad guide för att anvÀnda css-gradient, förstÄ bÀsta praxis för gradients och undvika vanliga misstag.
Vanliga frÄgor
LÀr dig hur du anvÀnder vÄra verktyg med vÄra detaljerade guider.