Skip to main content
LibraTool logoLibraTool

Free CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a live preview. Copy the CSS with one click.

Works offline once loaded
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Avoids grey midpoints between very different colours. Adds a plain sRGB line as a fallback for older browsers.

0%
100%

Presets

Common uses

  • Create Gradients for Hero SectionsDesign full-page gradient backgrounds for website hero sections and landing pages.
  • Create Gradient Buttons and CTAsDesign eye-catching gradient button backgrounds for calls-to-action that stand out.
  • Create Gradient Backgrounds for CardsDesign gradient fills for cards, modals, sidebars, and UI component backgrounds.
  • Create Gradients for Social Media GraphicsDesign vibrant gradient backgrounds for Instagram posts, YouTube thumbnails, and Twitter cards.
  • Create Colour Scales for ChartsGenerate gradient colour scales for heatmaps, progress bars, and data visualisations.

How It Works

The gradient generator builds CSS gradient strings directly in the browser — no library, no server, no upload. A hand-written function assembles the correct linear-gradient, radial-gradient, or conic-gradient syntax from your color stops and angle in real time, then formats the result for whichever output target you choose.

  1. 1
    Configure stops and direction
    You set between 2 and 6 color stops using the browser's native color picker, then position each stop along the 0–100% axis with a range slider. For linear and conic gradients you also pick an angle (0–360°); for radial gradients you choose the shape (ellipse or circle) and the size keyword that controls how far the gradient extends.
  2. 2
    buildCss assembles the gradient string
    On every change, a local buildCss function concatenates your parameters into the correct CSS function call — e.g. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). No library is involved; the string is built with plain JavaScript template logic and joined directly from the stop array.
  3. 3
    Live preview renders via inline style
    The assembled gradient string is applied directly to a div element as an inline background style, so the browser's own CSS engine renders the preview. There is no canvas or image involved — what you see is literally the CSS property being applied.
  4. 4
    Copy-ready output in four formats
    A format selector transforms the same gradient string into plain CSS (background: ...), a CSS-with-solid-fallback block, a Tailwind arbitrary-value class, or a SCSS variable declaration. Clicking Copy writes the selected output to the clipboard via navigator.clipboard.writeText. The current gradient is also encoded into the URL hash so you can bookmark or share it.

Related Tools

🟦

CSS Grid Generator

Visually design a CSS grid — tracks, units and gaps — and copy the generated CSS and HTML.

Try it
↔️

CSS Flexbox Generator

Experiment with flex direction, wrap, justify and align on live items — and copy the CSS.

Try it
🧮

Matrix Calculator

Add, subtract, multiply, transpose, invert, and reduce matrices, plus determinant, rank, eigenvalues, and solving Ax = b — up to 8×8, with one-tap copy. Free and private.

Try it

Frequently Asked Questions