jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS Gradient Generator

Build linear, radial, and conic CSS gradients with a live preview that updates as you adjust colors, positions, and angle. Supports up to three color stops with position percentages and an optional repeating mode for pattern gradients. The tool outputs a ready-to-paste CSS background property with correct vendor-neutral syntax. No design software needed — the visual preview shows exactly what your gradient will look like before you copy the code.

Loading tool...

What is CSS Gradient Generator?

CSS Gradient Generator is a visual tool for creating CSS gradient backgrounds without memorizing syntax. You choose the gradient type (linear, radial, or conic), pick colors and their stop positions, and adjust the angle. A live preview shows the gradient in real time as you make changes. The tool outputs a clean CSS background property you can paste directly into your stylesheet or inline style attribute. All rendering happens in your browser — no design software or image editor required.

quickAnswer

Build linear, radial, and conic CSS gradients visually with a live preview. Add up to three color stops with position percentages, adjust the angle, and toggle repeating mode. Copy the ready-to-use background CSS property directly.

Last updated: 2026-06-11

limitations

  • This tool supports three color stops for simplicity. Complex gradients with four or more stops need manual CSS editing after copying the base output.
  • Radial gradients are generated in circular form only. Elliptical radial gradients and custom shape values (e.g., circle at top left) are not supported in the current controls.
  • The tool does not generate vendor-prefixed CSS (-webkit-, -moz-). Modern browsers have supported unprefixed gradients since 2016-2017, but if you need very old browser support, add prefixes manually.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Select the gradient type: Linear (straight line), Radial (circular from center), or Conic (color wheel rotation).
  2. Set the angle to control gradient direction. For linear, 0deg is bottom-to-top. For conic, the angle sets the starting position of the first color.
  3. Pick two or three colors and set their position percentages. Positions control where each color peaks — 0% at the start, 100% at the end.
  4. Toggle repeating gradient for patterned output. Copy the CSS background property and paste it into your stylesheet.

What you can use it for

  • Design a modern hero section background with a diagonal blue-to-purple gradient at 135 degrees.
  • Create a conic gradient for a pie chart or color wheel that rotates around a center point.
  • Build a striped pattern background using repeating-linear-gradient with tight color stop positions.

Use cases

Practical examples

example

Landing page hero background

A frontend developer is styling a landing page hero section. They open the CSS Gradient Generator, select Linear at 135 degrees, and pick three brand colors: blue (#3b82f6) at 0%, purple (#8b5cf6) at 50%, and pink (#ec4899) at 100%. The live preview shows the diagonal gradient in real time, and they copy the background property directly into their hero selector.

example

Card vignette background

A UI designer needs a subtle radial vignette behind a card component. They select Radial gradient, set a light blue at 0% position (center) transitioning to white at 100% (edges). The preview shows a soft spotlight effect. The CSS is copied into the card container's stylesheet with no further editing needed.

Common mistakes

  • Forgetting to set the background-color fallback — always add a solid background-color before the gradient for browsers that do not support gradients or while the CSS is loading.
  • Using colors with low contrast between stops — the preview helps catch this, but verify the gradient still looks good when scaled to the actual element size.
  • Setting all stops at the same position — this creates hard lines instead of smooth transitions. Space stops apart for gradual blends, or keep them close for sharp transitions.

verification

  1. Set gradient type to Linear, angle to 90°, and add three stops with distinct colors. Verify the preview shows a horizontal gradient and the CSS output starts with linear-gradient(90deg.
  2. Switch to Radial gradient, set two stops, and toggle Repeating gradient on. Verify the CSS output begins with repeating-radial-gradient and the preview shows repeating concentric circles.

FAQ

Questions about CSS Gradient Generator

What is the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line defined by an angle (e.g., 135deg goes from top-left to bottom-right). Radial gradients spread outward from a center point in circular or elliptical shapes. Conic gradients rotate around a center point like a color wheel, with the angle controlling where the first color starts.

What does the repeating gradient option do?

A repeating gradient repeats the color stop pattern rather than filling the entire element. For example, repeating-linear-gradient(90deg, red, blue 20px) produces alternating 20px stripes. Use repeating gradients for patterns like stripes, checkerboards, and progress bars.

Can I use more than three color stops?

This tool supports up to three color stops because most common web gradients use two to three colors. For more complex gradients with four or more stops, you can copy the generated CSS and add additional stops manually by appending more color-position pairs separated by commas.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool