CSS gradientų generatorius

Sukurkite linijinius, radialinius ir kūginius CSS gradientus savo naršyklėje.

Spalvų stabdžiai

Naudokite stabdžių rankenėles arba klaviatūros rodykles, kad redaguotumėte padėtis. Kiekvienas stabdis apima aiškią spalvą, permatomumą ir procentą.

Paruošta nuskaityti

Interneto naršyklės vietinis apdorojimas

Jūsų gradientas lieka šioje naršyklėje. Jokios spalvos ar sugeneruotas CSS nesiunčiami į Convertr.

Apribota importo gramatika

Importas priima linear-gradient(), radial-gradient() arba conic-gradient() su hex spalvomis ir procentais. Deklaracijos, URL, kintamieji ir nežinomos funkcijos atmetami vietoje.

Prieinamas atsarginis variantas

Sugeneruotas CSS apima vientisą atsarginę fono spalvą kartu su gradientu nepalaikomiems atvaizdavimo mechanizmams ir prieinamai valdymo sąsajai.

Dažniausiai užduodami klausimai

Ar mano gradientas įkeliamas?

Ne. Gradiento būsena, spalvos, importuotas CSS ir sugeneruotas CSS lieka jūsų naršyklėje.

Kokie CSS gradiento tipai palaikomi?

Generatorius sukuria linear-gradient(), radial-gradient() ir conic-gradient() išvestį su keliomis hex spalvų stabdžiais.

Ką galiu importuoti?

Importas priima sąmoningai apribotą gramatiką, naudojančią vieną palaikomą gradiento funkciją, hex spalvas, pasirinktinius procentus ir apribotas kampo arba padėties reikšmes.

Susiję kūrėjų ir dizaino įrankiai

Kūrėjų įrankiaiNaršykite naršyklės priemones CSS spalvų konverterisKonvertuoti CSS spalvas SCSS KompiliatoriusSass / SCSS fragmentų kompiliavimas internete CSS minifierKomprimuoti CSS kodą vietiniu būdu jūsų naršyklėje. Vaizdo spalvų parinkiklisRinkitės spalvas iš paveikslėlių vietoje.

CSS gradientų generatorius

Sukurkite linijinius arba radialinius CSS gradientus ir peržiūrėkite spalvų sustojimus, kampą, padėtį ir kartojimą.

Įvestis
Gradiento tipas, spalvų taškai, padėtys, kampas ir kartojimo nustatymai.
Išvestis
Tiesioginė peržiūra ir kopijuojama CSS fono deklaracija.
Svarbūs apribojimai
Naršyklės atvaizdavimas gali šiek tiek skirtis priklausomai nuo variklio, o įrankis nevertina kontrasto ir negarantuoja palaikymo senesnėse naršyklėse.
Privatumas ir duomenų tvarkymas
gradiento tipas, spalvų stabdymo taškai, padėtys, kampas ir kartojimo nustatymai yra apdorojami šiame naršyklės skirtuke. Convertr negauna ir nesaugo jų; uždarius arba perkrovus puslapį darbo būsena išvaloma, nebent įrankis aiškiai siūlo vietinį atsisiuntimą.

Kaip naudoti šį įrankį

  1. Nurodykite gradiento tipą, spalvų stabdymo taškus, padėtis, kampą ir kartojimo nustatymus įrankio valdikliuose.
  2. Pasirinkite nustatymus, kurie veikia tiesioginę peržiūrą ir kopijuojamą CSS fono deklaraciją, tada paleiskite įrankį.
  3. Peržiūrėkite tiesioginę peržiūrą ir nukopijuojamą CSS fono deklaraciją prieš kopijuodami arba atsisiųsdami.

Dažnos nesėkmių priežastys

Trūkstama spalvų stotelė, netinkama spalva arba nesuderinama padėtis neleidžia sukurti galiojančios CSS deklaracijos.

Praktinis pavyzdys

Sukurkite 90 laipsnių linijinį gradientą nuo 0 % iki 100 % nuo #111827 iki #f59e0b ir kopijuokite deklaraciją.