CConvyra
Search

CSS Gradient Generator

Design a linear gradient and get the ready-to-use CSS code.

background: linear-gradient(135deg, #5B5FEF, #22D3B0);

How to use CSS Gradient Generator

  1. 1Pick a start color, end color, and angle.
  2. 2Preview the gradient live.
  3. 3Copy the generated CSS.

Why use this tool

  • Live preview updates instantly as you adjust colors or angle.
  • Outputs clean, ready-to-paste CSS.

Frequently asked questions

Does this support more than 2 colors?

This version supports 2-color linear gradients — the most common case for buttons, backgrounds and cards.

Related tools

HEX to RGB

Convert HEX color codes to RGB values with a live preview.

CSS Box Shadow Generator

Design a box shadow visually and copy the ready-to-use CSS.