Fara beint í aðalefni
LibraTool logoLibraTool

CSS-þrepasmiður — ókeypis

Búðu til línulegar, hringlægar og kónískar CSS-þrepur með beinni forskoðun. Afritaðu CSS með einum smelli.

Virkar án nettengingar eftir hleðslu
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Forðast grá millilit á milli mjög ólíkra lita. Bætir við venjulegri sRGB-línu sem varaleið fyrir eldri vafra.

0%
100%

Forstillingar

Algeng notkun

  • Búðu til liti fyrir hetjuhlutaHannaðu litablöðu bakgrunn fyrir vefsíðu hetjuhluta og flóðslóðir.
  • Búðu til litablöðu hnappa og CTAHannaðu athygliverðan litablöðu bakgrunn fyrir aukakall sem standa út.
  • Búðu til litablöðu bakgrunn fyrir kortHannaðu litablöðu fyllingu fyrir kort, gluggakassa, hliðarslár og UI stærðir bakgrunn.
  • Búðu til liti fyrir samfélagsmiðla myndagafnirHannaðu lifandi litablöðu bakgrunn fyrir Instagram færslur, YouTube minngalir og Twitter kort.
  • Búðu til litakvarða fyrir diagramBúðu til litablöðu litakvarða fyrir hitakort, framvindu stikur og gagnaskoðun.

Hvernig það virkar

Litstigulsmyndarinn byggir CSS litstigulsstrengi beint í vafranum — ekkert bókasafn, enginn netþjónn, engin upphleðsla. Handskrifað fall rangar saman réttu linear-gradient, radial-gradient, eða conic-gradient setningafræðina úr litastoppum þínum og horni í rauntíma, mótar svo niðurstöðuna fyrir hvaða úttaksmark sem þú velur.

  1. 1
    Stilltu stopp og stefnu
    Þú setur á milli 2 og 6 litastopp með native litavalstóli vafrans, staðsetur svo hvert stopp eftir 0–100% ásnum með sviðsrennu. Fyrir línulega og conic-litstigla velur þú einnig horn (0–360°); fyrir geislótta litstigla velur þú formið (sporöskja eða hringur) og stærðarlykilorðið sem stjórnar hversu langt litstigullinn nær.
  2. 2
    buildCss rangar saman litstigulsstrenginn
    Við hverja breytingu tengir staðbundið buildCss-fall breyturnar þínar saman í rétta CSS-fallkallið — t.d. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Ekkert bókasafn kemur við sögu; strengurinn er byggður með einfaldri JavaScript sniðmátsrökfræði og tengdur beint úr stoppfylkinu.
  3. 3
    Lifandi forskoðun myndgerist með innlínustíl
    Sett saman litstigulsstrengurinn er beitt beint á div-element sem innlínu bakgrunnsstíll, svo eigin CSS-vél vafrans myndgerir forskoðunina. Enginn kanvas eða mynd kemur við sögu — það sem þú sérð er bókstaflega CSS-eiginleikinn sem er beitt.
  4. 4
    Afritunartilbúið úttak í fjórum sniðum
    Sniðveljari umbreytir sama litstigulsstrengnum í hreint CSS (background: ...), CSS-með-solid-fallback blokk, Tailwind handahófs-gildisflokk, eða SCSS-breytuyfirlýsingu. Að smella á Afrita skrifar valda úttakið á klippiborðið með navigator.clipboard.writeText. Núverandi litstigull er einnig kóðaður í URL-hashinu svo þú getir bókamerkt eða deilt honum.

Tengd verkfæri

🟦

CSS Grid framleiðandi

Hannstu CSS hnitakerfi með sjónrænum hætti — brautir, einingar og bila — og afritaðu mynduðu CSS og HTML.

Prófaðu það
↔️

CSS Flexbox framleiðandi

Tilrauna með flex stefnu, vefingu, réttlætingu og samhæfingu á lifandi hlutum — og afritaðu CSS.

Prófaðu það
🧮

Fylkiareiknilegja

Leggðu saman, dragðu frá, margfaldaðu, speglaðu, umsnúðu og einfaldaðu fylki, auk ákveðu, ranks, eigingilda og lausnar á Ax = b — allt að 8×8, með afritun í einum smelli. Ókeypis og einkamál.

Prófaðu það

Algengar spurningar