Tasuta konverter

CSS-i gradient Generaator

Looge visuaalselt CSS-i gradiente reaalajas eelvaatega. Looge lineaarseid, radiaalseid ja koonuselisi gradiente kohandatud värvipeatustega – tasuta ja kliendipoolselt.

Reaalajas eelvaade
CSS-i väljund
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Nurk (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Sellest tööriistast

Looge visuaalse redaktoriga ilusaid CSS-i lineaarseid ja radiaalseid gradiente. Valige värve, reguleerige peatusi, muutke suunda või nurka ja vaadake reaalajas reaalajas eelvaate värskendust. Kopeerige loodud CSS-kood (sealhulgas vanemate brauserite tarnija eesliited) ja kleepige see otse oma stiililehele.

Kuidas kasutada

  1. Valige gradiendi tüüp: lineaarne või radiaalne.
  2. Lisage värvipeatused, klõpsates gradiendiribal ja valides värvid.
  3. Reguleerige juhtnuppude abil gradiendi nurka (lineaarne) või asendit (radiaalne).
  4. Kopeerige loodud CSS-kood väljundpaneelilt.

Korduma kippuvad küsimused

Kas CSS-i gradiendid töötavad kõigis brauserites?
Kaasaegseid CSS-i gradiente (lineaarne gradient, radiaalne gradient) toetavad kõik praegused brauserid, sealhulgas Chrome, Firefox, Safari ja Edge. Tööriist võib valikuliselt genereerida vanemate brauseriversioonide jaoks eesliiteid -webkit-.
Kas ma saan luua mitmevärvilisi gradiente?
Jah. Lisage nii palju värvipeatusi kui vaja. Samuti saate reguleerida iga peatuse asukohta, et juhtida värvide segunemist. See võimaldab keerulisi vikerkaare, päikeseloojangu või kohandatud kaubamärgi gradiente.
Mis vahe on lineaarsetel ja radiaalsetel gradientidel?
Lineaarsed gradiendid ületavad värve mööda sirgjoont (ülalt alla, vasakult paremale, diagonaalselt või mis tahes nurga all). Radiaalsed gradiendid viivad värve ümber keskpunktist väljapoole ringikujuliselt või elliptiliselt.
Kas ma saan kasutada gradienti teksti taustana?
Jah. Tekstile gradiendi rakendamiseks kasutage taustaklippi: tekst koos -webkit-text-fill-color: läbipaistvaga. Loodud CSS pakub gradiendi määratlust – ühendage see gradiendi teksti jaoks nende atribuutidega.