⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

Lineaarinen CSS-gradienttigeneraattori

Rakenna CSS-gradientit visuaalisesti: lineaarinen, säteittäinen tai kartiomainen tyyppi, kulman liukusäädin ja jopa kuusi väripysähdystä live-täysleveällä esikatselulla ja kopioitavalla koodilla.

90°
Käsitellään... 0%

Tulos

Tämä sivu avaa gradienttigeneraattorin, jonka lineaarinen tyyppi on jo valittuna. Vedä kulman liukusäädintä kiertääksesi häivytystä, säädäksesi väripysäytyksiä ja täysleveä esikatselu sekä CSS-rivin päivitys jokaisessa syötteessä.

linear-gradient() maalaa värit suoraa viivaa pitkin – CSS:ssä ylivoimaisesti eniten käytetty gradientti. 90 astetta kulkee vasemmalta oikealle, 180 astetta ylhäältä alas, ja mikä tahansa kulma näiden välissä antaa diagonaalin; pysäytyspisteet prosentteina määräävät, mistä kukin värinauha alkaa sulautua seuraavaan.

Kun esikatselu näyttää oikealta, kopioi taustaviiva tyylitaulukkoon. Jos haluat aloituspisteen tyhjän pöydän sijaan, auringonlaskun, valtameren ja pastellin esiasetussivut avaavat tämän saman työkalun jo ladatuilla todistetuilla väripareilla.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Gradienttityypin valinta (lineaarinen, säteittäinen, kartiomainen) kulman liukusäätimellä lineaarisia ja kartiomaisia tiloja varten.
  • Värien pysäytysluettelo: kaksi pysähdystä aloittaaksesi, lisätäksesi tai poistaaksesi enintään kuusi, jokaisella on oma värivalitsin ja sijainti prosentteina.
  • Kopioitava tausta-CSS-rivi sekä valmiit esiasetetut sivut auringonlaskua, merta ja pastelligradientteja varten.

Tärkeimmät edut

✓ Täysleveä esikatselu maalaa uudelleen jokaisen muutoksen – tyypin, kulman ja jokaisen väripysähdyksen – yhteydessä, joten kopioimasi CSS on juuri se, mitä näit.
✓ Jopa kuusi väripysäytyskohtaa yksittäisillä asennoilla kattaa kaiken yksinkertaisesta kahden värin häivytyksestä monimutkaisiin monikaistaisiin taustoihin.
✓ Yksi ilmoitus, kolme moottoria: vaihda lineaarisen, radiaalisen ja kartiomaisen välillä ilman, että pysähdyksiäsi rakennetaan uudelleen.

Käyttötapaukset

  • • Luo sankariosan tausta vetämällä kulma- ja väripysäytteitä sen sijaan, että muokkaat linear-gradient()-funktiota ja lataat sen uudelleen.
  • • Vertaa samoja väripysäytteitä kuin lineaarisia, säteittäisiä ja kartiomaisia gradientteja yhdellä kytkimellä – rajoittimet siirtyvät tyyppien välillä.
  • • Nappaa todistettu yhdistelmä auringonlaskun, valtameren tai pastellin esiasetussivulta ja muokkaa se brändisi väreiksi.