HTML5 and CSS3 logo

Gradient Settings

Gradient Type
Start Color
End Color
Start Stop %
End Stop %

Gradient CSS

CSS Linear and Radial Gradient Generator

Create linear or radial CSS gradients with a live preview. Choose colors, direction, and stop positions, then copy ready-to-use gradient CSS.

How to use this tool

Build a two-color CSS gradient visually instead of repeatedly editing values in a stylesheet. The preview and generated background declaration update from your selected settings.

  1. 1

    Choose the gradient type

    Select a linear gradient for a directional transition or a radial gradient that spreads from a center point.

  2. 2

    Pick both colors

    Set the start and end colors using the wide color controls or enter exact color values.

  3. 3

    Adjust direction and stops

    Choose the linear direction and set where each color starts and ends.

  4. 4

    Copy the CSS

    Check the live preview, then copy or download the generated background declaration.

CSS Gradient Generator FAQ

What is a CSS Gradient Generator?
A CSS Gradient Generator is a tool that helps you create gradient backgrounds using CSS without writing code manually.
What types of gradients can I create?
You can create linear gradients and radial gradients with multiple colors and directions.
Do I need coding knowledge to use this tool?
No, you can visually select colors and settings, and the tool will automatically generate the CSS code for you.
Can I copy the generated CSS code?
Yes, you can copy the generated CSS code and use it directly in your website or project.
Is this tool free and safe to use?
Yes, the tool is free to use, and all processing happens in your browser without storing your data.