CSS Gradient Generator

CSS Gradient Guide

CSS gradients let you display smooth transitions between two or more colors. They're rendered by the browser, so they scale perfectly at any resolution — no images needed.

Linear Gradients

Linear gradients transition colors along a straight line. Control the direction with angles (0° = bottom to top, 90° = left to right, 180° = top to bottom) or keywords like to right, to bottom left.

Example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Radial Gradients

Radial gradients radiate from a center point outward in a circle or ellipse. Great for spotlight effects, glowing buttons, and circular backgrounds.

Example: background: radial-gradient(circle, #ff6b6b, #556270);

Conic Gradients

Conic gradients transition colors around a center point (like a color wheel). Perfect for pie charts, clock-like displays, and artistic effects.

Example: background: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b);

Tips for Using Gradients

Use gradients as background-image — they work everywhere images do

Add multiple color stops for more complex effects

Combine gradients with background-blend-mode for creative effects

Use repeating-linear-gradient() for stripe patterns

Test gradients on different screen sizes — they're resolution-independent

Use subtle gradients (similar hues) for professional UI backgrounds

Frequently Asked Questions

How do I create a CSS gradient?

Use the gradient generator to pick colors and direction, then copy the generated CSS. Linear gradients go in a straight line, radial spreads from a center, and conic rotates around a point. All output is cross-browser compatible.

What is the CSS syntax for a linear gradient?

background: linear-gradient(to right, #ff6b6b, #4ecdc4). Direction can be to right, to bottom, or an angle like 45deg. Add more color stops for complex multi-color gradients.

How do I make a transparent gradient in CSS?

Use rgba() colors with transparency. Example: background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)). Creates a fade from opaque black to transparent — useful for image overlays and hero sections.

What is the difference between linear and radial gradients?

Linear gradients transition along a straight line. Radial gradients spread outward from a center point as a circle or ellipse. Conic gradients rotate colors around a center point, like a color wheel.

How do I add a gradient background to a div?

Use: div { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }. The generator lets you choose colors visually and produces the exact CSS code to copy-paste.