Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Gumagawa ng CSS Gradient

Gumawa ng linear, radial, at conic na CSS gradient na may live preview. Kopyahin ang CSS sa isang click.

Gumagana offline kapag na-load na
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Iniiwasan ang kulay-abong gitna sa pagitan ng magkalayong kulay. Nagdaragdag ng simpleng sRGB na linya bilang fallback para sa mas lumang browser.

0%
100%

Mga preset

Mga karaniwang gamit

  • Lumikha ng Gradients para sa Hero SectionsMag-design ng full-page gradient backgrounds para sa website hero sections at landing pages.
  • Lumikha ng Gradient Buttons at CTAsMag-design ng eye-catching gradient button backgrounds para sa calls-to-action na tunay na nakakaakit.
  • Lumikha ng Gradient Backgrounds para sa CardsMag-design ng gradient fills para sa cards, modals, sidebars, at UI component backgrounds.
  • Lumikha ng Gradients para sa Social Media GraphicsMag-design ng vibrant gradient backgrounds para sa Instagram posts, YouTube thumbnails, at Twitter cards.
  • Lumikha ng Colour Scales para sa ChartsLumikha ng gradient colour scales para sa heatmaps, progress bars, at data visualisations.

Paano ito Gumagana

Direktang binubuo ng gradient generator ang mga CSS gradient string sa browser — walang library, walang server, walang upload. Binubuo ng isang hand-written na function ang tamang linear-gradient, radial-gradient, o conic-gradient syntax mula sa mga color stop at anggulo mo nang real time, pagkatapos ay fino-format ang resulta para sa anumang output target na pipiliin mo.

  1. 1
    I-configure ang mga stop at direksyon
    Nagtatakda ka ng 2 hanggang 6 na color stop gamit ang native na color picker ng browser, pagkatapos ay inilalagay ang bawat stop sa 0–100% na axis gamit ang range slider. Para sa linear at conic gradient, pumipili ka rin ng anggulo (0–360°); para sa radial gradient, pinipili mo ang hugis (ellipse o bilog) at ang size keyword na kumokontrol kung gaano kalayo ang abot ng gradient.
  2. 2
    Binubuo ng buildCss ang gradient string
    Sa bawat pagbabago, pinagdudugtong ng lokal na buildCss function ang mga parameter mo sa tamang CSS function call — hal. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Walang library; binubuo ang string gamit ang simpleng JavaScript template logic at direktang pinagdudugtong mula sa stop array.
  3. 3
    Nire-render ang live preview sa pamamagitan ng inline style
    Direktang ina-apply ang nabuong gradient string sa isang div element bilang inline na background style, kaya ang sariling CSS engine ng browser ang nagre-render ng preview. Walang canvas o larawan — ang nakikita mo ay literal na ang CSS property na ina-apply.
  4. 4
    Output na handang kopyahin sa apat na format
    Binabago ng isang format selector ang parehong gradient string sa plain CSS (background: ...), CSS block na may solid fallback, Tailwind arbitrary-value class, o SCSS variable declaration. Kapag na-click ang Copy, isinusulat ang napiling output sa clipboard gamit ang navigator.clipboard.writeText. Ine-encode din ang kasalukuyang gradient sa URL hash kaya puwede mo itong i-bookmark o ibahagi.

Mga Kaugnay na Tool

🟦

Gumagawa ng CSS Grid

I-design nang visual ang CSS grid — tracks, units at gaps — at kopyahin ang generated CSS at HTML.

Subukan
↔️

Gumagawa ng CSS Flexbox

Mag-eksperimento sa flex direction, wrap, justify at align sa live items — at kopyahin ang CSS.

Subukan
🧮

Matrix Calculator

Mag-add, mag-subtract, mag-multiply, mag-transpose, mag-invert at mag-reduce ng mga matrix, kasama ang determinant, rank, eigenvalue, at paglutas ng Ax = b — hanggang 8×8, may one-tap na kopya. Libre at pribado.

Subukan

Mga Madalas na Itanong