CSS Gradient Generator

A CSS gradient is a smooth transition between two or more colors defined entirely in code — no image file needed. Gradients are rendered by the browser and scale perfectly to any size, making them ideal for backgrounds, buttons, dividers, and decorative elements.

Linear gradients transition colors along a straight line at a given angle (e.g. top to bottom, or diagonally). Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients rotate colors around a center point, like the slices of a color wheel.

Click "Copy CSS" and paste the output directly into your stylesheet. For example: `.hero { background: linear-gradient(135deg, #e8ff00 0%, #0a0a0a 100%); }`. You can also apply it inline with the `style` attribute in HTML.

A color stop defines a specific color at a specific position within the gradient. The position is expressed as a percentage (0% = start, 100% = end). You can add up to 5 stops to create multi-color gradients with precise control over where each color begins and ends.

Tailwind CSS supports arbitrary values in square brackets, which lets you use any CSS value directly in a class name. For example: `bg-[linear-gradient(135deg,#e8ff00_0%,#0a0a0a_100%)]`. Spaces inside the brackets must be replaced with underscores, which this tool handles automatically.

Yes. For text, combine the gradient with `background-clip: text` and `-webkit-text-fill-color: transparent` in your CSS. For borders, use the `border-image` property or a pseudo-element technique. This generator outputs the gradient value itself, which you can apply to any compatible CSS property.