Ustvarite čudovite CSS prelive brez napora

Z našim intuitivnim vmesnikom ustvarite osupljive linearne, radialne in stožčaste gradiente. Kopirajte kodo CSS in jo takoj uporabite v svojih projektih.

Preview

Ustvarjen CSS

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

Kontrole preliva

135°
0%
100%

Priljubljene prednastavitve

Primeri gradientov

Raziščite te osupljive primere prelivov in se navdihnite za svoj naslednji projekt. Kliknite na kateri koli preliv, da ga naložite v generator.

Sončni zahod Rdečica

Topel gradient, navdihnjen s čudovitimi sončnimi zahodi.

Oceanski vetrič

Miren gradient, ki vzbuja občutek obalnih voda.

Metina fuzija

Svež in moderen gradient, ki združuje metino in nebesno modro barvo.

Bujni vrt

Živahen gradient, ki predstavlja lepoto narave.

Kozmične sanje

Čarobni preliv, navdihnjen z nočnim nebom.

Zlata ura

Topel gradient, ki ujame bistvo somraka.

Dokumentacija o gradientih

Kaj so CSS gradienti?

CSS gradienti omogočajo prikaz gladkih prehodov med dvema ali več barvami. Uporabljajo se lahko kot ozadja za elemente in so na voljo v treh različnih vrstah:

  • Linearni gradienti:Prehod barv vzdolž ravne črte.
  • Radialni gradienti:Prehod barv od središčne točke navzven.
  • Stožčasti gradienti:Prehod barv okoli središčne točke v krogu.

Kako uporabljati prelive

Ko z našim orodjem ustvarite gradient, lahko kodo CSS uporabite v svojih projektih:

  1. Kopirajte kodo CSS iz generatorja.
  2. Prilepite ga v datoteko CSS ali pa ga uporabite v elementih HTML.
  3. Na kateri koli element uporabite preliv z uporabobackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Za bolj zapleten učinek preliva uporabite več kot dve barvi.
  • Prilagodite položaje barv, da nadzorujete, kje pride do prehodov.
  • Za še bolj ustvarjalne učinke združite več gradientov.
  • Pri stožčastih gradientih spreminjanje središča ustvari zanimive vzorce.
  • Shranite svoje najljubše gradiente za kasnejšo uporabo.

Podpora brskalnika

Gradienti CSS so v sodobnih brskalnikih široko podprti. Vendar pa jih starejši brskalniki, kot je Internet Explorer, morda ne bodo pravilno prikazali. Vedno navedite rezervno barvo:

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

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

O tem orodju

Naš generator CSS gradientov je zasnovan tako, da razvijalcem in oblikovalcem pomaga pri ustvarjanju čudovitih gradientov brez napora. Ne glede na to, ali delate na spletnem mestu, aplikaciji ali želite le eksperimentirati z barvami, vam to orodje olajša ustvarjanje popolnega gradienta za vaš projekt.

Features

Enostavna uporaba

Intuitiven vmesnik za ustvarjanje gradientov.

Odziven dizajn

Deluje brezhibno na vseh velikostih zaslona.

Pripravljeno za kopiranje in lepljenje

Takoj pridobite čisto kodo CSS.

Razpoložljive prednastavitve

Začnite s čudovitimi vnaprej določenimi gradienti.

Related Tools

Pretvornik pisala v CSS

Pretvorite svojo kodo SCSS v CSS. Hitro, enostavno in varno.

Spletni generator CSS senc besedila

Ustvarite osupljive učinke preliva besedila za svojo spletno stran

Olepševalec CSS

Oblikujte in polepšajte svojo kodo CSS s profesionalno natančnostjo

Kalkulator marže

Izračunajte dobičkonosno maržo, bruto maržo in maržo z našim obsežnim kalkulatorjem marže.

Pretvornik navora

Natančno pretvarjanje meritev navora med različnimi enotami

Pretvornik dolžine

Pretvarjajte med različnimi dolžinskimi enotami z lahkoto in natančnostjo. Popolno za vsakodnevno uporabo in profesionalno uporabo.