Preskoči na glavno vsebino
LibraTool logoLibraTool

Generator prehodov CSS — brezplačno

Ustvarite linearne, radialne in konične prehode CSS z živim predogledom. Kopirajte CSS z enim klikom.

Deluje brez povezave po nalaganju
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Prepreči sive srednje točke med zelo različnimi barvami. Doda navadno vrstico sRGB kot rezervo za starejše brskalnike.

0%
100%

Prednastavitve

Pogosta področja uporabe

  • Ustvari preliv za hero odsekeOblikujte ozadja celotne strani z degradirano barvo za sekcije junaka in dovodne strani spletnega mesta.
  • Ustvarite gumbe in CTA z degradacijoOblikujte privlačna ozadja gumbov z degradacijo za ukrepe, ki izstopajo.
  • Ustvarite degradirana ozadja za karticeOblikujte degradirane polnitve za kartice, modalne pogovore, stranske plošče in ozadja komponent UI.
  • Ustvarite pregrade za grafiko v družabnih medijihOblikujte živahna ozadja z degradacijo za objave na Instagramu, sličice na YouTubu in kartice na Twitterju.
  • Ustvarite barvne lestvice za grafikoneUstvarite barvne lestvice degradacije za toplotne zemljevide, napredne proge in vizualizacije podatkov.

Kako deluje

Generator prelivov gradi nize CSS prelivov neposredno v brskalniku — brez knjižnice, brez strežnika, brez nalaganja. Ročno napisana funkcija v realnem času sestavi pravilno skladnjo linear-gradient, radial-gradient ali conic-gradient iz vaših barvnih postankov in kota, nato oblikuje rezultat za izbrano izhodno tarčo.

  1. 1
    Konfigurirajte postanke in smer
    Nastavite med 2 in 6 barvnih postankov z uporabo nativnega izbirnika barv brskalnika, nato pozicionirajte vsak postanek vzdolž osi 0–100 % z drsnikom range. Za linearne in konične prelive izberete tudi kot (0–360°); za radialne prelive izberete obliko (elipsa ali krog) in ključno besedo velikosti, ki nadzoruje, kako daleč se preliv razteza.
  2. 2
    buildCss sestavi niz preliva
    Ob vsaki spremembi lokalna funkcija buildCss združi vaše parametre v pravilen klic funkcije CSS — npr. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nobena knjižnica ni vpletena; niz je zgrajen z navadno logiko predlog JavaScript in povezan neposredno iz polja postankov.
  3. 3
    Živ predogled se izriše prek vrstičnega sloga
    Sestavljen niz preliva se neposredno uporabi na elementu div kot vrstičen slog ozadja, tako da lasten CSS pogon brskalnika izriše predogled. Ni vpletenega platna ali slike — to, kar vidite, je dobesedno uporabljena lastnost CSS.
  4. 4
    Za kopiranje pripravljen izpis v štirih oblikah
    Izbirnik oblike pretvori isti niz preliva v navaden CSS (background: ...), blok CSS z nadomestno trdno barvo, razred Tailwind s poljubno vrednostjo, ali deklaracijo spremenljivke SCSS. Klik na Kopiraj zapiše izbrani izpis v odložišče prek navigator.clipboard.writeText. Trenuten preliv je prav tako kodiran v hashu URL, tako da ga lahko dodate med zaznamke ali delite.

Sorodna orodja

🟦

Generator CSS Grid

Vizuelno oblikujte CSS mrežo — sledenje, enote in vrzeli — in kopirajte generirani CSS in HTML.

Poskusite
↔️

Generator CSS Flexbox

Poskušite z flex smerjo, zavitkem, justificiranjem in poravnavo na živih predmetih — in kopirajte CSS.

Poskusite
🧮

Matrični kalkulator

Seštevajte, odštevajte, množite, transponirajte, invertirajte in reducirajte matrike ter izračunajte determinanto, rang, lastne vrednosti in rešite Ax = b – do 8×8, s kopiranjem z enim dotikom. Brezplačno in zasebno.

Poskusite

Pogosto zastavljena vprašanja