Preview

Luodut

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

CSS-liukuvärisäätimet

135°
0%
100%

Suosittuja esiasetuksia

Gradienttiesimerkkejä

Tutustu näihin upeisiin gradienttiesimerkkeihin ja hanki inspiraatiota seuraavaa projektiasi varten. Napsauta mitä tahansa kaltevuutta ladataksesi sen generaattoriin.

Sunset Blush

Lämmin liukuväri, joka on saanut inspiraationsa kauniista auringonlaskuista.

Ocean Breeze

Rauhallinen kaltevuus, joka herättää rannikkovesien tunteen.

Mint Fusion

Raikas ja moderni liukuväri, jossa yhdistyvät minttu ja taivaansininen.

Lush Garden

Eloisa kaltevuus, joka edustaa luonnon kauneutta.

Kosminen unelma

Maaginen liukuväri, joka on saanut inspiraationsa yötaivaasta.

Golden Hour

Lämmin liukuväri, joka vangitsee hämärän olemuksen.

esimerkkigradienttidokumentaatio

Mitä ovat CSS-kaltevuudet?

CSS-liukuvärien avulla voit näyttää tasaisia siirtymiä kahden tai useamman värin välillä. Niitä voidaan käyttää elementtien taustoina, ja niitä on kolmea eri tyyppiä:

  • Lineaariset kaltevuudet:Siirtymävärit suoraa viivaa pitkin.
  • Säteittäiset kaltevuudet:Siirtymävärit keskipisteestä ulospäin.
  • Kartioliukuvärit:Siirtymävärit ympyrän keskipisteen ympärillä.

Kuinka käyttää kaltevuuksia

Kun olet luonut gradientin työkalullamme, voit käyttää CSS-koodia projekteissasi:

  1. Kopioi CSS-koodi generaattorista.
  2. Liitä se CSS-tiedostoon tai käytä sitä HTML-elementeissäsi.
  3. Käytä liukuväriä mihin tahansa elementtiinbackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • : Käytä useampaa kuin kahta väriä, jos haluat monimutkaisemman liukuväritehosteen
  • Säädä värien sijainteja hallitaksesi, missä siirtymät tapahtuvat.
  • Yhdistä useita liukuvärejä luovempien tehosteiden saamiseksi.
  • Kartiomaisissa kaltevuuksissa keskipisteen muuttaminen luo mielenkiintoisia kuvioita.
  • Tallenna suosikkiliukuvärisi myöhempää käyttöä varten.

Selaimen tuki

CSS-liukuvärit ovat laajalti tuettuja nykyaikaisissa selaimissa. Vanhemmat selaimet, kuten Internet Explorer, eivät kuitenkaan välttämättä renderöi niitä oikein. Anna aina varaväri:

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

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Tietoja tästä työkalusta

CSS-gradienttigeneraattorimme on suunniteltu auttamaan kehittäjiä ja suunnittelijoita luomaan kauniita kaltevuuksia vaivattomasti. Työskenteletpä sitten verkkosivuston tai sovelluksen parissa tai haluat vain kokeilla värejä, tämän työkalun avulla on helppo luoda täydellinen kaltevuus projektiisi.

Features

Helppokäyttöinen

Intuitiivinen käyttöliittymä kaltevuuksien luomiseen.

Responsiivinen muotoilu

Toimii täydellisesti kaikenkokoisilla näytöillä.

Kopioi ja liitä valmis

Hanki puhdas CSS-koodi välittömästi.

olevat esiasetukset

Aloita kauniilla ennalta määritetyillä liukuväreillä.

Related Tools

CSS3-siirtymägeneraattori

Sujuva peittävyyden siirtyminen

Less CSS-muotoon -muunnin

Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

Sass:sta CSS:ksi muunnin

Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

Heksa binaariksi

Muunna heksadesimaalikoodi binääriksi vaivattomasti

SHA3-384 Hajautuslaskuri

Luo SHA3-384-tiivisteitä nopeasti ja helposti

CSS LESS -muunnin

Muunna CSS-koodisi LESS:ksi muuttujien, sisäkkäisyyksien ja muiden avulla. Nopeaa, helppoa ja turvallista.