Siirry pääsisältöön
LibraTool logoLibraTool

CSS-gradienttgeneraattori ilmaiseksi

Luo lineaarisia, radiaalisia ja kartiomaisia CSS-gradientteja reaaliaikaisella esikatselulla. Kopioi CSS yhdellä napsautuksella.

Toimii offline-tilassa kerran ladattuna
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Välttää harmaat välipisteet hyvin erilaisten värien välillä. Lisää tavallisen sRGB-rivin varaversioksi vanhemmille selaimille.

0%
100%

Esiasetetut

Yleiset käyttötavat

  • Luo Gradientit Hero-osilleSuunnittele koko sivun gradienttitaustat verkkosivujen hero-osille ja saapumissivuille.
  • Luo Gradienttinapit ja CTA:tSuunnittele silmää kiinnittäviä gradienttipainikkeiden taustat toimintakehotuksille, jotka erottuvat.
  • Luo Gradienttitaustat KorteilleSuunnittele gradienttitäyttöjä korteille, modaaleille, sivupalkeille ja käyttöliittymäkomponenttien taustoille.
  • Luo Gradientit Sosiaalisen Median GrafiikoilleSuunnittele elävät gradienttitaustat Instagram-postauksille, YouTube-pikkukuville ja Twitter-korteille.
  • Luo Väriskaala KaavioilleLuo gradienttiväriskaala lämpökartoille, edistymispalkeille ja tietojen visualisoinneille.

Miten se toimii

Väriliuku-generaattori rakentaa CSS-väriliukumerkkijonoja suoraan selaimessa — ei kirjastoa, ei palvelinta, ei latausta. Käsin kirjoitettu funktio kokoaa oikean linear-gradient-, radial-gradient- tai conic-gradient-syntaksin väripysähdyksistäsi ja kulmastasi reaaliajassa, ja muotoilee tuloksen sitten valitsemallesi tulostemuodolle.

  1. 1
    Määritä pysähdykset ja suunta
    Asetat 2–6 väripysähdystä selaimen natiivilla värivalitsimella, ja sijoitat sitten jokaisen pysähdyksen 0–100 %:n akselille alueliukusäätimellä. Lineaarisille ja kartioliukuille valitset myös kulman (0–360°); pyöreille liu'uille valitset muodon (ellipsi tai ympyrä) ja kokoavainsanan, joka hallitsee kuinka pitkälle liuku ulottuu.
  2. 2
    buildCss kokoaa liukumerkkijonon
    Jokaisella muutoksella paikallinen buildCss-funktio yhdistää parametrisi oikeaksi CSS-funktiokutsuksi — esim. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Kirjastoa ei käytetä; merkkijono rakennetaan tavallisella JavaScript-mallilogiikalla ja yhdistetään suoraan pysähdystaulukosta.
  3. 3
    Suora esikatselu piirtyy inline-tyylin kautta
    Koottu liukumerkkijono sovelletaan suoraan div-elementtiin inline-taustan tyylinä, joten selaimen oma CSS-moottori piirtää esikatselun. Kanvasta tai kuvaa ei käytetä — näkemäsi on kirjaimellisesti sovellettu CSS-ominaisuus.
  4. 4
    Kopiointivalmis tuloste neljässä muodossa
    Muotovalitsin muuntaa saman liukumerkkijonon joko pelkäksi CSS:ksi (background: ...), CSS:ksi kiinteän varavärin kera, Tailwind-mielivaltaisarvoluokaksi, tai SCSS-muuttujamäärittelyksi. Kopioi-painikkeen napsauttaminen kirjoittaa valitun tulosteen leikepöydälle navigator.clipboard.writeText-funktion kautta. Nykyinen liuku koodataan myös URL-hashiin, jotta voit kirjanmerkitä tai jakaa sen.

Liittyvät työkalut

🟦

CSS-verkon generaattori

Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.

Kokeile sitä
↔️

CSS Flexbox -generaattori

Kokeile flex-suuntaa, käärintää, tasaus ja linjaus reaaliaikaisilla kohteilla — ja kopioi CSS.

Kokeile sitä
🧮

Matriiseilaskin

Laske matriisien summa, erotus ja tulo, transponoi, käännä ja redusoi, sekä determinantti, aste, ominaisarvot ja Ax = b:n ratkaisu — jopa 8×8, kopiointi yhdellä napautuksella. Ilmainen ja yksityinen.

Kokeile sitä

Usein kysytyt kysymykset