Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis CSS Gradiëntgenerator

Skep lineêre, radiale en koniese CSS-gradiënte met 'n lewendige voorskou. Kopieer die CSS met een klik.

Werk vanlyn sodra gelaai
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Vermy grys middelpunte tussen baie verskillende kleure. Voeg 'n gewone sRGB-reël as terugval vir ouer blaaiers by.

0%
100%

Voorkeure

Algemene gebruike

  • Skep gradiënte vir heldeseksiesOntwerp volsidige gradiënt-agtergronde vir webwerf-heldeseksies en landingsbladsy's.
  • Skep gradiënt-knoppies en CTA'sOntwerp opvallende gradiënt-knoppie-agtergronde vir oproepinge tot aksie.
  • Skep gradiënt-agtergronde vir kaarteOntwerp gradiënt-vullings vir kaarte modale sy-stawe en UI-komponent-agtergronde.
  • Skep gradiënte vir sosiale media-grafiekeOntwerp lewendige gradiënt-agtergronde vir Instagram-hoogtepunte YouTube-duimnale en Twitter-kaarte.
  • Skep kleurkale vir grafiekeGenereer gradiënt-kleurkale vir hittekarte voortgangsbalke en gegevensviskualisasies.

Hoe dit werk

Die gradiënt-generator bou CSS-gradiëntstrings direk in die blaaier — geen biblioteek, geen bediener, geen oplaai nie. 'n Handgeskrewe funksie stel die korrekte linear-gradient-, radial-gradient-, of conic-gradient-sintaksis saam vanaf jou kleurstoppe en hoek intyds, formateer dan die resultaat vir watter uitsetteiken jy ook al kies.

  1. 1
    Stel stoppe en rigting op
    Jy stel tussen 2 en 6 kleurstoppe met die blaaier se inheemse kleurkieser, posisioneer dan elke stop langs die 0–100%-as met 'n reikskuiwer. Vir liniêre en koniese gradiënte kies jy ook 'n hoek (0–360°); vir radiale gradiënte kies jy die vorm (ellips of sirkel) en die grootte-sleutelwoord wat beheer hoe ver die gradiënt strek.
  2. 2
    buildCss stel die gradiëntstring saam
    By elke verandering voeg 'n plaaslike buildCss-funksie jou parameters saam in die korrekte CSS-funksie-aanroep — bv. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Geen biblioteek is betrokke nie; die string word met gewone JavaScript-sjabloonlogika gebou en direk vanaf die stop-reeks saamgevoeg.
  3. 3
    Lewendige voorskou render via inlynstyl
    Die saamgestelde gradiëntstring word direk op 'n div-element as 'n inlyn-agtergrondstyl toegepas, sodat die blaaier se eie CSS-enjin die voorskou render. Daar is geen canvas of beeld betrokke nie — wat jy sien is letterlik die CSS-eienskap wat toegepas word.
  4. 4
    Kopieer-gereed-uitset in vier formate
    'n Formaatkieser skakel dieselfde gradiëntstring om na gewone CSS (background: ...), 'n CSS-met-soliede-terugval-blok, 'n Tailwind-arbitrêre-waarde-klas, of 'n SCSS-veranderlike-verklaring. Om Kopieer te klik skryf die gekose uitset na die knipbord via navigator.clipboard.writeText. Die huidige gradiënt word ook in die URL-hash geënkodeer sodat jy dit kan boekmerk of deel.

Verwante gereedskap

🟦

CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Probeer dit
↔️

CSS Flexbox-kragopwekker

Eksperimenteer met flex-rigting, -verpakking, -regverdigheid en -afstemming op live-items — en kopieer die CSS.

Probeer dit
🧮

Matriksrekenaar

Tel by, trek af, vermenigvuldig, transponeer, inverteer en vereenvoudig matrikse, plus determinant, rang, eiewaardes en die oplos van Ax = b — tot 8×8, met eenklik-kopiëring. Gratis en privaat.

Probeer dit

Gereelde vrae