Skip to content
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

CSS gradient generator

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

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

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.

Technical details

  • The angle follows the CSS convention: 0° runs bottom to top, 90° left to right and 180° top to bottom.
  • The color fields accept any CSS color: HEX, rgb(), rgba() with transparency, hsl() or names such as "tomato".
  • The code comes as a full background property. If a color isn't valid, the preview doesn't render: check that field.

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