What is CSS Gradient Generator?

A tool for creating CSS linear-gradient and radial-gradient without writing code. Choose colors with the picker, adjust angles and positions with sliders, and preview your results in real-time. When you're done, copy the generated CSS code with one click and use it directly in your project.

Gradient Basics

CSS gradients smoothly blend multiple colors together, specified with the background property. They add more depth than solid colors, making them popular for headers, cards, and buttons.

There are two main types:

• Linear Gradient: Colors change along a straight line (left to right, top to bottom, etc.)
• Radial Gradient: Colors spread outward from the center in circular or elliptical patterns

Key Features

Gradient Type Selection

Switch between linear and radial gradients. For linear gradients, you can specify angles from 0-360 degrees, with preset buttons available for commonly used angles (0°, 45°, 90°, 180°, 270°). For radial gradients, choose between circular and elliptical shapes.

Color Stop Management

Add up to 8 colors and adjust each position within the 0-100% range. The "Equal Position" button automatically spaces colors evenly, and you can then fine-tune individual positions with sliders.

Real-Time Preview

Changes appear instantly in the preview, so you can experiment and iterate as you design. Once you're satisfied, copy the generated CSS code and paste it into your project.

How to Use

Use the controls on the left to select gradient type, angle, and shape. Adjust colors and positions with color stops. Check the result in the preview area on the right, then copy the generated CSS code.

Linear Gradient

A type where colors change along a straight line, with the angle determining the direction.

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

Angle Specification
0 degrees points upward, 90 degrees points right, and 180 degrees points down. Use preset buttons to quickly select common angles, then fine-tune with the slider in 1-degree increments.

Color Stops
Specify where each color begins as a percentage. For example, #667eea 0% starts blue at the left edge, and #764ba2 100% continues purple to the right edge.

Radial Gradient

A type where colors spread outward from the center in circular or elliptical patterns.

background: radial-gradient(circle, #667eea 0%, #764ba2 100%);

Shape Selection
Circle renders as a perfect circle, while ellipse adapts to the element's aspect ratio. Choose based on your background shape for a natural appearance.

Tips for Beautiful Gradients

Color Selection

Combining adjacent colors on the color wheel (blue to purple, yellow to orange) creates natural, harmonious results. Larger differences in brightness add depth, while highly saturated colors give an energetic impression.

Controlling Mood with Angles

• 90° (horizontal): Simple and calm impression
• 45° or 135° (diagonal): Dynamic impression with movement
• 180° (vertical): When you want to emphasize vertical flow

Adjusting Color Stops

When using 3 or more colors, start by spacing them evenly with "Equal Position," then manually adjust only the parts you want to emphasize. To create sharp color transitions, position adjacent colors close together.

Use Cases

Useful for header backgrounds, cards, button hover effects, and various other scenarios.

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

/* Card background */
background: radial-gradient(circle at top left, #fa709a 0%, #fee140 100%);

Browser Support

All modern browsers support CSS gradients, but it's recommended to specify a fallback color for older browsers.

background: #667eea; /* Fallback color */
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Browsers that don't support gradients will display the solid color specified on the first line.