Skip to content
QuickToolio
es - Espanolen - English

CSS gradient generator

Create a linear CSS gradient by picking two colors and an angle, with a preview and copy-ready code.

Processed on your device. Nothing is sent to any server.
background: linear-gradient(135deg, #0B6E63, #55BFAF);

Create a linear CSS gradient by picking two colors and the angle of the transition, with a live preview and copy-ready code.

Generates the CSS linear-gradient() function with the specified colors and angle, compatible with all modern browsers.

Use cases

  • Creating a gradient background for a header.
  • Designing buttons with a gradient effect.
  • Trying out different color combinations before applying them.

How it works

  1. 1

    Pick two colors

    Select the gradient's start and end color.

  2. 2

    Adjust the angle

    Set the gradient's direction in degrees.

  3. 3

    Copy the CSS

    Copy the background property ready to paste into your stylesheet.

Frequently asked questions

Does it only generate linear gradients?
Yes, the MVP focuses on linear-gradient(); radial or conic gradients may be added later.

Related tools

← Colors & design