CSS-liukuvärigeneraattori
Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
Mikä on CSS-liukuväri?
CSS-liukuväri on CSS-kuva-arvo, joka näyttää pehmeät siirtymät kahden tai useamman värin välillä ilman kuvatiedostoja. Selain renderöi liukuvärit, joten ne ovat resoluutiosta riippumattomia ja erittäin suorituskykyisiä.
Mitkä CSS-liukuvärityypit ovat tuettuja?
Tämä generaattori tukee kolmea tyyppiä: linear-gradient (värit suoran viivan varrella), radial-gradient (värit säteilevät keskipisteestä) ja conic-gradient (värit pyörivät keskipisteen ympäri).
Lineaarisen ja radiaalisen liukuvärin ero?
Lineaariset liukuvärit siirtävät värejä suoran viivan varrella, jonka määrittää kulma tai suunnan avainsana. Radiaaliset liukuvärit siirtävät värejä ulospäin keskipisteestä ympyrän tai ellipsin muotoisina.
Kuinka monta väripysähdystä voin käyttää?
Voit käyttää niin monta väripysähdystä kuin tarvitset. Jokainen pysähdys määrittää värin ja valinnaisesti sijainnin (0%–100%) liukuväriviivalla.
Miten käytän luotua CSS-koodia?
Kopioi luotu CSS-koodi ja liitä se background- tai background-image-ominaisuuden arvoksi CSS-tyylitiedostossasi. Koodi toimii kaikissa moderneissa selaimissa.
Mitä ovat väripysähdykset liukuväreissä?
Väripysähdykset määrittävät tiettyjä värejä tietyissä sijainneissa liukuväriviivalla. Esimerkiksi "red 0%, blue 50%, green 100%" luo liukuvärin, joka alkaa punaisena, siirtyy siniseen keskellä ja päättyy vihreään.
Voinko luoda kulmallisia liukuvärejä?
Kyllä, lineaariset liukuvärit tukevat kulma-arvoja 0deg:stä 360deg:hen. Voit myös käyttää suunnan avainsanoja kuten "to right", "to bottom", "to top left".
Ovatko CSS-liukuvärit responsiivisia?
Kyllä, CSS-liukuvärit ovat luonnostaan responsiivisia, koska ne ovat vektoripohjaisia ja selain renderöi ne. Ne skaalautuvat täydellisesti mihin tahansa säiliön kokoon laadun heikkenemättä.
Vaikuttavatko CSS-liukuvärit sivun suorituskykyyn?
CSS-liukuvärit ovat yleensä erittäin suorituskykyisiä. Ne eliminoivat HTTP-pyynnöt kuvatiedostoille ja ovat laitteistokiihdytettyjä. Erittäin monimutkaiset liukuvärit voivat kuitenkin vaikuttaa renderöintiin heikoilla laitteilla.
Voinko käyttää liukuvärejä taustoihin ja reunoihin?
Kyllä, liukuvärejä voidaan käyttää background-image, border-image, mask-image ja mihin tahansa CSS-kuva-arvoja hyväksyvään ominaisuuteen.
Mitkä selaimet tukevat CSS-liukuvärejä?
Kaikki modernit selaimet tukevat CSS-liukuvärejä: Chrome, Firefox, Safari, Edge ja Opera. Tuki on ollut erinomainen IE10:stä lähtien. Toimittajan etuliittejä ei enää tarvita.
Miten luon toistuvan liukuvärin?
Käytä repeating-linear-gradient tai repeating-radial-gradient standardiversioiden sijaan. Nämä toistavat liukuvärikuvion koko elementin täyttämiseksi.
Voinko animoida CSS-liukuvärejä?
CSS-liukuvärejä ei voi suoraan animoida CSS-siirtymillä. Voit kuitenkin animoida background-position, background-size tai käyttää mukautettuja CSS-ominaisuuksia @property:n kanssa.
Onko tämä liukuvärigeneraattori ilmainen?
Kyllä, tämä CSS-liukuvärigeneraattori on täysin ilmainen. Ei rekisteröitymistä, ei käyttörajoituksia ja kaikki luotu koodi on sinun käytettäväksi missä tahansa projektissa.
Näin käytät työkalua CSS-liukuvärigeneraattori
Luo CSS-liukuvärejä silmämääräisesti ja kopioi tuotantokelpoinen CSS heti. Renderöinti tapahtuu paikallisesti selaimessasi ilman lähetystä.
- Valitse liukuvärin Type: linear-gradient tai radial-gradient.
- Aseta lineaariselle liukuvärille Angle tai valitse säteittäiselle Shape, esimerkiksi circle tai ellipse.
- Lisää, värjää uudelleen ja raahaa väripysähdyksiä Color Stops -osiossa.
- Napsauta jotakin näytettä Presets-kohdan alta aloittaaksesi valmiista seoksesta.
- Kopioi luotu CSS ja liitä se tyylisivuusi.
Kahden eri värisen pysähdyksen sijoittaminen samaan kohtaan tuottaa terävän reunan — nopea tapa tehdä raidoita ilman kuvia.
Aiheeseen liittyvät työkalut
- CSS Box Shadow Generaattori Ilmainen online CSS box-shadow generaattori. Luo kauniita varjoja visuaalisesti säädettävällä siirtymällä, sumennuksella, leviämisellä, värillä ja insetillä. Live-esikatselu ja välitön koodin kopiointi.
- CSS Border Radius Generaattori Visuaalinen CSS border-radius generaattori. Säädä jokaista kulmaa itsenäisesti reaaliaikaisella esikatselulla ja kopioi CSS-koodi välittömästi.
- CSS Grid-generaattori Ilmainen visuaalinen CSS Grid-generaattori live-esikatselulla. Suunnittele responsiivisia grid-asetteluja interaktiivisesti ja vie tuotantovalmis CSS-koodi heti.
- CSS Flexbox-generaattori Visuaalinen CSS Flexbox-generaattori live-esikatselulla. Säädä flex-ominaisuuksia ja saa heti käyttövalmis CSS-koodi.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.