CSS-gradient-generator

Generer CSS-gradient-kode ved å velge farger og vinkler, med forhåndsvisning

OppdateringsinformasjonLagt til CSS-gradientgenerator, generer kode ved å velge farge og vinkelSe oppdateringer

Funksjoner

Forhåndsvisning og kode oppdateres samtidig

Utseendet og CSS endres samtidig når du endrer farger eller vinkler

Støtter lineær, radial og konisk gradient

Angi fint vinkler, form og midtpunkt for hver type

Juster opptil 10 farger ved å dra

Juster fargeplassering ved å dra på linjen, og gjennomsiktighet med glidebryteren

8 forhåndsvisninger og tilfeldig generering

Start med standard fargesammensetninger eller tilfeldige farger og gjør små justeringer

Hvordan bruke

Velg type

Velg gradientstype blant lineær, radial og konisk

Bestem fargene

Velg farger ved hjelp av fargekode eller forhåndsvisninger, legg til farger med "Legg til farge" og juster posisjon og gjennomsiktighet

Juster retning

For lineær gradient, angi vinkel eller retningsknapper; for radial og konisk, angi midtpunkt

Kopier kode

Kopier en enkelt linje CSS med "Kopier"-knappen og lim inn i stilen din

Brukstilfeller

Bakgrunn for hero-bilder

Bestem bakgrunnsfarger for nettstedets topp eller knapper uten å skrive kode

Fargeutvalg for blogg-overskrifter

Velg fargesammensetninger som ligner forhåndsvisningene for å ordne bakgrunnen for artikkeloverskrifter

Overlegg som legges over bilder

Lag et halvgjennomsiktig lag ved å plassere en farge med redusert gjennomsiktighet over bildet

Justering av flerfarget gradient

Juster posisjonen for grensen mellom 3 eller flere farger ved å dra litt om gangen

Grunnleggende kunnskap

Forskjell mellom linear, radial og conic

CSS-gradienter har 3 funksjoner med ulike fargeendringer, og alle skrives i background-egenskapen.

linear-gradient：linear-gradient er en lineær gradient der fargen endres langs en rett linje i angitt vinkel.
radial-gradient：radial-gradient er en radial gradient der fargen sprer seg fra midtpunktet utover i en sirkel eller ellipse.
conic-gradient：conic-gradient er en konisk gradient der fargen endres som går rundt midtpunktet i klokkevisers retning.

Korrespondanse mellom vinkler og retningsnøkkelord

Vinkelen for linear-gradient er 0deg når den peker oppover, og øker med klokkevisers retning. Vinkelen kan også skrives som retningsnøkkelord som "to right", der 90deg tilsvarer "to right" og 180deg tilsvarer "to bottom".

Fargestoppunkter og gjennomsiktighetsskriving

Fargestoppunkter (color stops) angir hvor en farge vises i gradienten, der 0% er startpunktet og 100% er endepunktet. For eksempel "#3B82F6 0%, #8B5CF6 100%" angir en fargeskift fra blå ved starten til lilla ved slutten.

#RRGGBB-format：#RRGGBB-format er en måte å skrive farger på ved hjelp av heksadesimal representasjon av rødt, grønt og blått (2 sifre hver), der #FF0000 representerer opaque rød.
rgba-format：rgba-format er en måte å skrive farger ved hjelp av rødt, grønt og blått (0–255) pluss gjennomsiktighet (0–1), der 0,5 gjennomsiktighet representerer halvgjennomsiktig.