Handitab

CSS Gradient Generator

Generate a CSS linear or radial gradient from two colors and an angle with a live preview, then copy the background declaration.

About CSS Gradient Generator

A CSS gradient is an image generated by the browser that blends between colors, used as a background without an image file. This generator writes either linear-gradient() with an angle from 0 to 360 degrees or radial-gradient() with a circle shape, each with two color stops. In CSS, 0deg points up and angles increase clockwise, so 90deg runs left to right. Extra color stops and stop positions can be added by hand.

How to use CSS Gradient Generator

  1. Fill in "Type", "Start color", "End color" and "Angle".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Gradient Generator

Which direction does the gradient angle point?

In standard CSS, 0deg runs from bottom to top, 90deg from left to right, and 180deg from top to bottom. The first color starts at the opposite side and blends toward the direction of the angle.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Grid GeneratorBuild a CSS grid layout by setting columns, rows, track size, and gap with a live preview, then copy the grid-template declarations.CSS Loader GeneratorGenerate a pure CSS loading indicator (ring spinner, bouncing dots, bars, or pulse) with your size, color, and speed, and copy the code.CSS Switch GeneratorGenerate CSS for a toggle switch built on a real checkbox input, with your own width, on and off colors, and animation speed.CSS Text Glitch Effect GeneratorGenerate a CSS glitch text effect with two offset color layers and an adjustable speed, previewed on your own text, then copy the code.CSS Text ShadowGenerate a CSS text-shadow by adjusting horizontal offset, vertical offset, blur, and color with a live preview on sample text.CSS Triangle GeneratorGenerate a pure CSS triangle pointing up, down, left, or right with the border technique, by setting its width, height, and color.