Aqbeż għall-kontenut ewlieni
LibraTool logoLibraTool

Ġeneratur ta' Gradients CSS b'xejn

Oħloq gradients CSS lineari, radjali, u koniċi b'preview ħaj. Ikkopja l-CSS b'klikk wieħed.

Jaħdem offline ladarba mgħobbi
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Jevita nofsijiet griżi bejn kuluri differenti ħafna. Iżid linja sempliċi sRGB bħala alternattiva għal brawżers eqdem.

0%
100%

Presets

Użi komuni

  • Oħloq Gradients għal Hero SectionsDesign full-page gradient backgrounds għal website hero sections u landing pages.
  • Oħloq Gradient Buttons u CTAsDesign eye-catching gradient button backgrounds għal calls-to-action li qagħdu mifruxa.
  • Oħloq Gradient Backgrounds għal CardsDesign gradient fills għal cards, modals, sidebars u UI component backgrounds.
  • Oħloq Gradients għal Social Media GraphicsDesign vibrant gradient backgrounds għal Instagram posts, YouTube thumbnails u Twitter cards.
  • Oħloq Colour Scales għal ChartsGenerate gradient colour scales għal heatmaps, progress bars u data visualisations.

Kif Taħdem

Il-ġeneratur tal-gradjent jibni strings tal-gradjent CSS direttament fil-browser — l-ebda librerija, l-ebda server, l-ebda tela'. Funzjoni miktuba bl-idejn tibni s-sintassi korretta linear-gradient, radial-gradient, jew conic-gradient mill-waqfiet tal-kulur u l-angolu tiegħek f'ħin reali, imbagħad tifformatta r-riżultat għal liema format tal-ħruġ tagħżel.

  1. 1
    Ikkonfigura waqfiet u direzzjoni
    Issettja bejn 2 u 6 waqfiet ta' kulur bl-użu tal-għażla ta' kulur nattiva tal-browser, imbagħad qiegħed kull waqfa tul l-ass 0–100% b'slajder ta' medda. Għal gradjenti lineari u koniċi tagħżel ukoll angolu (0–360°); għal gradjenti radjali tagħżel il-forma (ellissi jew ċirku) u l-kelma ta' daqs li tikkontrolla kemm il-gradjent jestendi.
  2. 2
    buildCss jibni l-istring tal-gradjent
    F'kull bidla, funzjoni lokali buildCss tikkonkatena l-parametri tiegħek fis-sejħa korretta tal-funzjoni CSS — eż. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). L-ebda librerija involuta; l-istring jinbena b'loġika ta' template sempliċi ta' JavaScript u jingħaqad direttament mill-array tal-waqfiet.
  3. 3
    Il-previżjoni ħajja tirrendja permezz ta' stil inline
    L-istring tal-gradjent mibni jiġi applikat direttament għal element div bħala stil ta' sfond inline, biex il-magna CSS stess tal-browser tirrendja l-previżjoni. L-ebda canvas jew stampa involuta — dak li tara huwa litteralment il-proprjetà CSS li qed tiġi applikata.
  4. 4
    Ħruġ lest għall-kopja f'erba' formats
    Selettur tal-format jittrasforma l-istess string tal-gradjent f'CSS sempliċi (background: ...), blokk ta' CSS b'fallback solidu, klassi ta' valur arbitrarju ta' Tailwind, jew dikjarazzjoni ta' varjabbli SCSS. L-ikklikkjar ta' Ikkopja jikteb il-ħruġ magħżul fil-clipboard permezz ta' navigator.clipboard.writeText. Il-gradjent kurrenti huwa wkoll ikkodifikat fil-hash tal-URL biex tista' tissejvjah bookmark jew taqsmu.

Għodod Relatati

🟦

Ġeneratur tas-CSS Grid

Iddisinja CSS grid viżwalment — tracks, units u gaps — u kopja l-CSS u HTML ġenerati.

Ipprova
↔️

Ġeneratur tas-CSS Flexbox

Sperimenta b'flex direction, wrap, justify u align fuq items live — u kopja l-CSS.

Ipprova
🧮

Kalkulatur tal-Matriċi

Żid, naqqas, immultiplika, ittrasponi, aqleb u naqqas matriċi, flimkien mad-determinant, ir-rank, il-valuri proprji u s-soluzzjoni ta' Ax = b — sa 8×8, b'kopja b'tapp wieħed. B'xejn u privat.

Ipprova

Mistoqsijiet Frekwenti