Gearboxly

Free CSS Gradient Generator

Build linear gradients and copy the CSS.

Feedback Report issue
Loading tool…

About the CSS Gradient Generator

Free CSS gradient generator. Design linear gradients with two colors and an angle, preview them live and copy the ready-to-use CSS background.

How it works

  1. 1

    Pick colors

    Choose your start and end colors.

  2. 2

    Set the angle

    Rotate the gradient direction.

  3. 3

    Copy CSS

    Paste it into your stylesheet.

Frequently asked questions

Yes — the generated background property is one click to copy.

Yes — set any angle from 0 to 360 degrees.

Related tools

Color Palette Generator

Generate shades, tints and harmonies.

Open tool

Box Shadow Generator

Design CSS box shadows visually.

Open tool

Border Radius Generator

Craft rounded corners and copy the CSS.

Open tool

Random Color Generator

Generate random colors with hex codes.

Open tool
Browse all tools →