# Gradient generator

> Preview a gradient and copy its CSS.

[Open tool](https://www.toolcabana.com/ta/gradient-maker) · [படங்கள் மற்றும் வடிவமைப்பு](https://www.toolcabana.com/ta/category/images-and-design)

Tool ID: gradient-maker. Requested language: ta. Description language: en. Complete guide translation: no; untranslated sections use English.

## Overview (en)

Gradient generator builds a two-color CSS linear gradient. You pick the first and second colors and an angle from 0 to 360 degrees, see a preview swatch, and get a ready-to-paste background declaration such as linear-gradient(135deg, ...). The CSS can be copied or downloaded as gradient.css.

## Supported tasks (en)

Preview a gradient and copy its CSS.

## Steps (en)

1. Enter the requested values in the settings panel.
2. Set first color, second color, angle (degrees).
3. Run gradient generator, review the output, then use the available copy or download controls.

## Settings

- First color (en; key: first; type: color)
- Second color (en; key: second; type: color)
- Angle (degrees) (en; key: angle; type: number); minimum: 0; maximum: 360

## Limitations (en)

Images are limited to 32 megapixels and 16,000 pixels per side. Most operations accept one source; supported batch operations produce a ZIP archive.

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

### How do I make a CSS linear gradient?

Choose two colors and an angle, then run the tool. It outputs a line like background: linear-gradient(135deg, #ed854b, #f4d9c5); that you can paste into any CSS rule.

### What does the gradient angle mean?

The angle sets the direction of the gradient line in CSS degrees. 0 runs bottom to top, 90 runs left to right, 180 runs top to bottom, and the default 135 runs diagonally toward the bottom right.

### Can I add more than two colors to the gradient?

No. This generator creates gradients with exactly two color stops. You can edit the copied CSS by hand to insert extra colors between the first and second values.

### Where is my input processed?

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

### What are the input limits?

Images are limited to 32 megapixels and 16,000 pixels per side. Most operations accept one source; supported batch operations produce a ZIP archive.

## Related tools

- [Image collage maker](https://www.toolcabana.com/ta/collage-maker)
- [Meme generator](https://www.toolcabana.com/ta/meme-maker)
- [Contrast checker](https://www.toolcabana.com/ta/contrast-checker)
- [SVG optimizer](https://www.toolcabana.com/ta/svg-optimizer)