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

Sunset CSS Gradient — Valmis koodi

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 valmiilla auringonlaskun häivytyksellä: lämmin koralli #ff7e5f virtaa pehmeään persikkaan #feb47b, vasemmalta oikealle. Esikatselu näyttää sen heti täysleveänä, ja alla oleva CSS-rivi on valmis kopioitavaksi sellaisenaan.

Lämpimät korallin ja persikan väliset häivähdykset ovat sankariosion pääkappale, koska ne ovat ystävällisiä ja energisiä ilman ylivoimaista valkoista tekstiä. Tämän parin sävyt ovat riittävän lähellä, jotta keskipiste pysyy puhtaana – ei mutaista harmaata nauhaa keskellä, tavallinen etäisten värien välisten liukuvärien epäonnistumistila.

Käytä sitä muuttumattomana tai tee siitä omasi: käännä kulmaa saadaksesi diagonaalisen auringonlaskun, vedä ensimmäistä pysähdystä sisäänpäin saadaksesi vahvemman korallin läsnäolon tai lisää kolmas pysähdys, jossa on lähes 100 % syvä luumu, jotta saat hämärän tunteen. Jokainen muutos päivittää kopioitavan CSS:n välittömästi.

🛡️
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.