CSS gradiendi generaator

Loo oma brauseris lineaarne, radiaalne ja kooniline CSS gradient.

Värvipeatused

Kasuta peatuse käepidemeid või klaviatuuri nooli, et muuta positsioone. Iga peatus sisaldab selget värvi, läbipaistmatust ja protsenti.

Valmis

Brauseripõhine kohalik töötlemine

Sinu gradient jääb sellesse brauserisse. Ühtegi värvi ega genereeritud CSS-i ei saadeta Convertrile.

Piiratud impordi grammatika

Import aktsepteerib lineaarset gradient(), radiaalset gradient() või koonilist gradient() koos hex-värvide ja protsentidega. Deklaratsioonid, URL-id, muutujad ja tundmatud funktsioonid lükatakse kohalikult tagasi.

kättesaadav varuvariant

Genereeritud CSS sisaldab tugevat taustavärvi tagasilangust koos gradiendiga mittetoetatud renderdajatele ja juurdepääsetavale juhtimiskroomile.

Korduma kippuvad küsimused

Kas minu gradient on üles laaditud?

Ei. Gradiendi olek, värvid, imporditud CSS ja genereeritud CSS jäävad sinu brauserisse.

Milliseid CSS-i gradiendi tüüpe toetatakse?

Generaator loob lineaarse gradient(), radiaalse gradient() ja koonilise gradient() väljundi mitme hex-värvipunktiga.

Mida ma saan importida?

Import aktsepteerib tahtlikult piiratud grammatikat, kasutades ühte toetatud gradientfunktsiooni, hex-värve, valikulisi protsente ja piiratud nurga või asukoha väärtusi.

Seotud arendaja ja disaini tööriistad

Arendaja tööriistadSirvi brauseri utiliite CSS värvimuundurTeisenda CSS värve SCSS kompilaatorKompileeri Sass/SCSS lõike veebis CSS-i minimeerijaTihenda CSS-koodi kohalikult oma brauseris. Pildi värvivalijaVali värvid piltidest kohalikult.

CSS gradiendi generaator

Ehitage lineaarsed või radiaalsed CSS-i gradientid ja vaadake eelvaadet värvipunktidest, nurgast, asukohast ja kordusest.

Sisend
Gradiendi tüüp, värvipunktid, asukohad, nurk ja korduse seaded.
Väljund
Reaalajas eelvaade ja kopeeritav CSS tausta deklaratsioon.
Tegelikud piirangud
Brauseri renderdamine võib mootoriti veidi erineda ja tööriist ei hinda kontrasti ega garanteeri tuge vanemates brauserites.
Privaatsus ja andmete töötlemine
Gradiendi tüüp, värvipunktid, asukohad, nurk ja kordusseaded töödeldakse selles brauseri vahekaardil. Convertr ei saa seda ega salvesta; lehekülje sulgemine või uuesti laadimine puhastab tööoleku, välja arvatud juhul, kui tööriist pakub selgelt kohalikku allalaadimist.

Kuidas seda tööriista kasutada

  1. Määrake tööriista juhtnuppudes gradiendi tüüp, värvipunktid, asukohad, nurk ja kordusseaded.
  2. Valige seaded, mis mõjutavad reaalajas eelvaadet ja kopeeritavat CSS taustadeklaratsiooni, seejärel käivitage tööriist.
  3. Vaadake elavat eelvaadet ja kopeeritavat CSS-i taustadeklaratsiooni enne selle kopeerimist või allalaadimist.

Levinud ebaõnnestumise viisid

Puuduv värvipunkt, kehtetu värv või sobimatu asukoht takistab kehtiva CSS deklaratsiooni loomist.

Kasulik näide

Looge 90-kraadine lineaarne gradient #111827 0% juurest #f59e0b 100% juurde ja kopeerige deklaratsioon.