CSS Gradient Generator -tuotantokone

Luo lineaariset, radialiset ja kooniset CSS-gradientit selaimessasi.

Väri pysähtyy

Käytä pysähdyspisteitä tai näppäimistöjä asennusten muokkaamiseen. Jokainen pysäyttö sisältää selkeän värin, epätarkkuuden ja prosenttiosuuden.

Valmis

Native-Browser paikallinen käsittely

Gradientti pysyy tässä selaimessa. Ei värejä tai tuotu CSS lähetetään Convertrille.

rajoitettu maahantuonnin kieli

Tuonti hyväksyy lineaarisen gradientin(), radialisen gradentin() tai koonisen graduentin()) hex värillä ja prosentteina. ilmoitukset, URL-osoitteet, muuttujat ja tuntematon toiminto hylätään paikallisesti.

Käytettävissä oleva Fallback

Tuotettu CSS sisältää kiinteän taustakuvakehyksen rinnalla gradientin tuottamattomille renderereille ja käytettävissä olevaan ohjauskromaan.

Usein kysytyt kysymykset

Onko gradientti nostettu?

Gradient tilan, värit, tuotu CSS ja tuotu CSS pysyvät selaimessa.

Millaisia CSS-gradienttietyyppejä tuetaan?

Tuotanto luo lineaarisen gradientin(), radial-gradientin() ja koonisen gradentin() tuotannon useilla hex värin pysähdyksillä.

Mitä voin tuoda?

Tuonti hyväksyy tahallisesti rajoitetun gramman käyttämällä yhtä tuettua gradienttiominaisuutta, hex-värit, valinnaiset prosenttiosuudet ja rajallinen kulma tai sijaintiarvot.

CSS Gradient Generator -tuotantokone

Rakenna lineaariset tai radialiset CSS-gradientit ja ennakoida värin pysähtymät, kulma, sijainti ja toistaminen.

Syöte
Gradienttippi, värin pysähtymät, asennukset, kulma ja toistuvien asetusten.
Tuloste
Live Preview ja kopioitavaa CSS-tilaus.
Todelliset rajoitukset
Browser rendering voi vaihdella hieman moottorin mukaan, ja työkalu ei arvioi kontrastia tai takaa tukea perinnöllisissä selaimissa.
Yksityisyys ja tietojen käsittely
gradienttippi, värin pysähdys, asennukset, kulma ja toistaminen asetukset käsitellään tässä selaimen taulukossa. muunnin ei saa tai tallentaa sitä; sulkeminen tai uudelleen lataaminen sivun puhdistaa työskentelytapaa, ellei työkalu nimenomaisesti tarjoaa paikallisen latauksen.

Miten käyttää tätä työkalua

  1. Tarjoa gradienttietä, värin pysähtymät, asennukset, kulmat ja toistuvia asetuksia työkalun ohjauksissa.
  2. Valitse asetukset, jotka vaikuttavat live-esityksen ja kopioitavien CSS-tilausten taustakuvaukseen, sitten käynnistä työkalu.
  3. Tarkista live-esityksen ja kopioitavien CSS-tilausten taustakuva ennen kopiointia tai lataamista.

Yleiset epäonnistumismodit

Puuttuva väri pysäyttää, vaarallinen väri tai yhteensopimaton sijainti estää voimassa olevan CSS-julistuksen luomisen.

Hyödyllinen esimerkki

Luo 90 astetta lineaarinen gradientti #111827 0 %: lla #f59e0b 100 %lla ja kopioi ilmoitus.