Picsova

CSS Gradient Generator

Design linear gradients with custom colors and angle, preview them live, and copy ready-to-use CSS. Great for backgrounds and buttons.

Runs entirely in your browser. Nothing is uploaded.

background: linear-gradient(135deg, #8b5cf6, #22d3ee);

Build & copy CSS gradients

CSS gradient syntax is easy to write and hard to predict: the angle behaves differently from the one in your design tool, and two colours that look fine as swatches can produce a muddy band in the middle. Adjusting the colours and the angle against a live preview solves that in seconds, and the finished `linear-gradient()` rule is ready to copy straight into your stylesheet.

How to build a CSS gradient

  1. 1

    Pick your colours

    Choose the start and end colours of the gradient.

  2. 2

    Set the angle

    Rotate the gradient and watch the live preview update as you go.

  3. 3

    Copy the CSS

    Take the complete `linear-gradient()` declaration for your stylesheet.

Good to know

  • In CSS, `0deg` points the gradient upward and `90deg` points it to the right — which is not the same convention every design tool uses.
  • Colours from opposite sides of the colour wheel tend to go grey where they meet; picking hues closer together keeps the blend clean.
  • The generated rule works as a `background` or `background-image` value on any element.
  • Nothing is uploaded, and the preview keeps working offline once the page has loaded.

What people use it for

  • Building a hero or section background for a landing page
  • Creating a gradient button or card treatment
  • Matching a gradient from a mockup to real, working CSS

Frequently asked questions

What gradient type does it create?+

A CSS linear-gradient between two colors at an angle you choose, with a live preview and ready-to-copy CSS.

Can I use the output directly in CSS?+

Yes: copy the generated `background: linear-gradient(...)` line straight into your stylesheet.

Related tools

Color Converter

HEX ⇄ RGB ⇄ HSL with a picker

Color Palette Extractor

Pull dominant colors from an image

Color Contrast Checker

WCAG AA & AAA pass or fail

Tints & Shades Generator

Build a colour scale from one hex

Or browse all 50 free tools.