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

Ocean 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 valtameren häivytyksellä ladattuina: syvä sinivihreä #2193b0 virtaa vaaleaan akvaan #6dd5ed. Täysleveä esikatselu hahmontaa sen kerralla ja taustalla oleva CSS-rivi on valmis kopioitavaksi.

Sinivihreät liukuvärit ovat käyttöliittymän turvallisin valinta: ne ilmaisevat rauhallisuutta ja luottamusta, pitävät valkoisen ja tumman tekstin luettavana molemmista päistä ja sopivat yhtä hyvin kojelaudat, SaaS-aloitussivut ja bannerit. Molemmat pysähdykset jakavat saman viileän sävyperheen, joten sekoitus pysyy puhtaana koko pituudeltaan.

Lähetä se sellaisenaan tai säädä: jyrkentää kulmaa pystysyvyysvaikutelman saamiseksi tai lisää lähes valkoinen pysäytys 100 % horisontin hehkua varten. Jos tarvitset yhteensopivia yksivärisiä painikkeita ja korostuksia, tämän sivuston väripalettigeneraattori rakentaa harmonian kummasta tahansa pysähdyksestä.

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