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

CSS Conic Gradient Generator

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 liukuvärigeneraattorin, jossa kartiomainen tyyppi on jo valittuna: sen sijaan, että värit häipyisivät viivaa pitkin tai ulos keskustasta, ne pyyhkäisevät keskustan ympärillä kuin kellon osoittimen, alkaen liukusäätimellä määritetystä kulmasta.

conic-gradient() on uusin kolmesta CSS-gradienttifunktiosta ja se on ympyräkaavioiden, värirenkaiden ja katseenvangitsevien pyörivien reunustehosteiden takana. Pysäytysasennot prosentteina ovat paikkoja ympyrän ympärillä – kaksi pysähdystä 0 %:ssa ja 100 %:ssa sulautuvat tasaisesti koko matkan ympäri, kun taas lähellä toisiaan sijoitetut pysähdykset muodostavat teräviä kiiloja.

Säädä aloituskulmaa ja pysäytyksiä, kunnes esikatselu on oikea, ja kopioi sitten taustaviiva. Kaikki nykyaikaiset selaimet tukevat kartiogradientteja, joten koodi on turvallista lähettää.

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