Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis CSS-gradientgenerator

Skapa linjära, radiala och koniska CSS-gradienter med liveförhandsvisning. Kopiera CSS med ett klick.

Fungerar offline när den väl lästs in
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Undviker grå mellanpunkter mellan mycket olika färger. Lägger till en vanlig sRGB-rad som reserv för äldre webbläsare.

0%
100%

Förval

Vanliga användningar

  • Skapa övertoningar för hjältesektionerDesigna helsidesövertonbakgrunder för webbplatsens hjältesektioner och målsidor.
  • Skapa övertone knappar och CTA:erDesigna iögonfallande övertone knappbakgrunder för uppmaning till åtgärd som sticker ut.
  • Skapa övertonbakgrunder för kortDesigna övertonefyllningar för kort, modaler, sidofält och UI-komponentbakgrunder.
  • Skapa övertoninger för sociala medierDesigna livfulla övertonbakgrunder för Instagram-inlägg, YouTube-miniatyrbilder och Twitter-kort.
  • Skapa färgskalor för diagramGenerera övertone färgskalor för värmekartöver, förloppsbalkar och datavisualiseringar.

Så här fungerar det

Gradientgeneratorn bygger CSS-gradientsträngar direkt i webbläsaren — inget bibliotek, ingen server, ingen uppladdning. En handskriven funktion sätter samman korrekt linear-gradient-, radial-gradient- eller conic-gradient-syntax från dina färgstopp och vinkel i realtid, och formaterar sedan resultatet för det utdatamål du väljer.

  1. 1
    Ställ in stopp och riktning
    Du ställer in mellan 2 och 6 färgstopp med webbläsarens inbyggda färgväljare, och positionerar sedan varje stopp längs 0–100 %-axeln med ett reglage. För linjära och koniska gradienter väljer du också en vinkel (0–360°); för radiella gradienter väljer du formen (ellips eller cirkel) och storleksnyckelordet som styr hur långt gradienten sträcker sig.
  2. 2
    buildCss sätter samman gradientsträngen
    Vid varje ändring sammanfogar en lokal buildCss-funktion dina parametrar till rätt CSS-funktionsanrop — t.ex. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Inget bibliotek är inblandat; strängen byggs med vanlig JavaScript-mallogik och sammanfogas direkt från stopp-arrayen.
  3. 3
    Levande förhandsvisning renderas via infogad stil
    Den sammansatta gradientsträngen tillämpas direkt på ett div-element som en infogad bakgrundsstil, så att webbläsarens egen CSS-motor renderar förhandsvisningen. Ingen canvas eller bild är inblandad — det du ser är bokstavligen CSS-egenskapen som tillämpas.
  4. 4
    Kopieringsklar utdata i fyra format
    En formatväljare omvandlar samma gradientsträng till ren CSS (background: ...), ett CSS-block med solid reservfärg, en godtycklig Tailwind-värdesklass, eller en SCSS-variabeldeklaration. Att klicka på Kopiera skriver den valda utdatan till urklipp via navigator.clipboard.writeText. Den aktuella gradienten kodas också i URL-hashen så att du kan bokmärka eller dela den.

Relaterade verktyg

🟦

CSS Grid-generator

Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.

Prova det
↔️

CSS Flexbox-generator

Experimentera med flex-riktning, wrap, justify och align på live-objekt — och kopiera CSS.

Prova det
🧮

Matrisräknare

Addera, subtrahera, multiplicera, transponera, invertera och radreducera matriser, plus determinant, rang, egenvärden och lösning av Ax = b – upp till 8×8, med kopiering med ett tryck. Gratis och privat.

Prova det

Vanliga frågor