Preset swatches

Click a gradient to load it into the editor

Free CSS Gradient Generator

This CSS gradient generator helps you build beautiful linear and radial gradients for websites, apps, and landing pages. Pick colors, set angle and stops, preview the result live, then copy production-ready background CSS in one click.

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors. Unlike a flat background color, a gradient can blend hues across an angle or radiate from a center point. Gradients are defined with functions such as linear-gradient() and radial-gradient(), and they belong to the CSS image type—so you can use them anywhere a background image is allowed. The most common use is a CSS gradient background on a hero section, card, button, or full-page layout.

Linear gradient CSS

A linear gradient in CSS changes color along a straight line. You control direction with an angle in degrees (for example 135deg) or with keywords like to right. Each color stop sets a color and optional position, such as 0% or 50%. Linear gradients are the most popular choice for headers, buttons, and brand backgrounds because they are easy to read and work well with modern UI design.

background: linear-gradient(135deg, #020024 0%, #090979 35%, #00d4ff 100%);

Radial gradient CSS

A radial CSS gradient spreads color outward from a center point. You can choose a circle or ellipse shape and place the origin at center, top, or any corner. Radial gradients are ideal for spotlights, glowing effects, and soft vignettes behind content.

background: radial-gradient(circle at center, #5c0067 0%, #00d4ff 100%);

How to create a CSS gradient with this tool

Choose Linear or Radial at the top of the editor.
Adjust the angle (linear) or shape and position (radial).
Add up to five color stops and drag them on the stops bar.
Edit colors in Hex or RGBA, or pick from preset swatches above.
Copy the generated CSS, or turn on max compatibility for older browser prefixes.
Paste existing gradient CSS into Import CSS to edit it visually.
Share your design with the link copy field—no account needed.

CSS gradient backgrounds for your project

Whether you are building a portfolio, SaaS dashboard, or blog theme, a well-chosen gradient background adds depth without heavy images. Search for a CSS gradient generator when you need quick inspiration: start from a swatch, fine-tune stops, and paste the code into your stylesheet or inline styles. For hero sections, pair a dark-to-light gradient with readable text contrast; for buttons, a short two-stop linear gradient often looks clean and professional.

Why use a gradient generator?

Writing gradient syntax by hand is error-prone—especially with multiple rgba stops and vendor prefixes. A visual gradient maker shows exactly what you will ship, reduces trial and error in the browser DevTools, and keeps hex, rgba, and percentage stops consistent. This page is free, runs in your browser, and does not store your designs unless you copy or share a link.