Preview

Sugeneruotas CSS

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Gradiento valdikliai

135°
0%
100%

Populiarūs išankstiniai nustatymai

Gradiento pavyzdžiai

Peržiūrėkite šiuos nuostabius gradiento pavyzdžius ir pasisemkite įkvėpimo kitam projektui. Spustelėkite bet kurį gradientą, kad įkeltumėte jį į generatorių.

Saulėlydžio skaistalai

Šiltas gradientas, įkvėptas gražių saulėlydžių.

Vandenyno vėjas

Ramus nuolydis, sukeliantis pakrantės vandenų jausmą.

Mėtų sintezė

Šviežias ir modernus gradientas, jungiantis mėtų ir dangaus mėlynumą.

Sodrus sodas

Ryškus gradientas, vaizduojantis gamtos grožį.

Kosminis sapnas

Magiškas gradientas, įkvėptas naktinio dangaus.

Auksinė valanda

Šiltas gradientas, fiksuojantis prieblandos esmę.

Gradiento dokumentacija

Kas yra CSS gradientai?

CSS gradientai leidžia rodyti sklandžius perėjimus tarp dviejų ar daugiau spalvų. Jie gali būti naudojami kaip elementų fonai ir yra trijų skirtingų tipų:

  • Linijiniai gradientai:Pereinamosios spalvos išilgai tiesios linijos.
  • Radialiniai gradientai:Spalvų perėjimas iš centrinio taško į išorę.
  • Kūginiai gradientai:Spalvų perėjimas aplink centrinį tašką apskritime.

Kaip naudoti gradientus

Sugeneravę gradientą naudodami mūsų įrankį, galite naudoti CSS kodą savo projektuose:

  1. Nukopijuokite CSS kodą iš generatoriaus.
  2. Įklijuokite jį į CSS failą arba naudokite įdėtąjį HTML elementuose.
  3. Taikykite gradientą bet kuriam elementui naudodamibackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Naudokite daugiau nei dvi spalvas, kad gautumėte sudėtingesnį perėjimo efektą.
  • Koreguokite spalvų padėtis, kad valdytumėte, kur vyksta perėjimai.
  • Sujunkite kelis perėjimus, kad gautumėte dar daugiau kūrybinių efektų.
  • Kūginiams gradientams keičiant centrą sukuriami įdomūs modeliai.
  • Išsaugokite mėgstamus gradientus, kad galėtumėte naudoti vėliau.

Naršyklės palaikymas

CSS gradientai plačiai palaikomi šiuolaikinėse naršyklėse. Tačiau senesnės naršyklės, pvz., "Internet Explorer", gali netinkamai jas atvaizduoti. Visada pateikite atsarginę spalvą:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Apie šį įrankį

Mūsų CSS gradiento generatorius sukurtas taip, kad padėtų kūrėjams ir dizaineriams be vargo sukurti gražius gradientus. Nesvarbu, ar dirbate su svetaine, programa, ar tiesiog norite eksperimentuoti su spalvomis, šis įrankis leidžia lengvai sugeneruoti tobulą projekto gradientą.

Features

Lengva naudoti

Intuityvi sąsaja gradientams kurti.

Adaptyvus dizainas

Puikiai veikia visų dydžių ekranuose.

Paruošta kopijuoti ir įklijuoti

Akimirksniu gaukite švarų CSS kodą.

Galimi išankstiniai nustatymai

Pradėkite nuo gražių iš anksto nustatytų nuolydžių.

Related Tools

Mažiau į CSS Konverteris

Paverskite savo "Less" kodą į CSS. Greita, paprasta ir saugu.

Sass į CSS Konverteris

Paverskite savo Sass kodą į CSS. Greita, paprasta ir saugu.

Rašiklis į CSS Konverteris

Transformuokite savo SCSS kodą į CSS. Greita, paprasta ir saugu.

RGB į Pantone

Konvertuokite skaitmenines RGB spalvas į artimiausius "Pantone®" atitikmenis

Pasirinktinės privatumo politikos kūrimas

Sukurkite išsamią privatumo politiką, pritaikytą jūsų svetainei, programai ar paslaugai.

SHA3-384 maišos skaičiuoklė

Greitai ir lengvai generuokite SHA3-384 maišą