CSS Gradient Generator

Generate CSS gradient code with live preview by simply selecting colors and angles

UpdatesAdded CSS gradient generator to create code by selecting colors and anglesView Updates

Features

Preview and Code Update Simultaneously

CSS and appearance change in real-time as you adjust colors and angles

Support for Linear, Radial, and Conic Gradients

Specify angles, shapes, and center positions in detail for each type

Adjust Up to 10 Colors by Dragging

Drag colors along the bar to adjust position and use sliders for transparency

8 Sample Palettes and Random Generation

Start with popular or random color schemes and fine-tune from there

How to Use

Select Type

Choose a gradient type from linear, radial, or conic

Choose Colors

Select colors using color codes or samples, add more colors with "Add Color", and adjust position and transparency

Adjust Direction

For linear gradients, set angle or direction buttons; for radial and conic, specify center position

Copy Code

Click "Copy" to copy the single-line CSS to your stylesheet

Use Cases

Create Hero Image Backgrounds

Set background colors for your site header or buttons without writing code

Choose Blog Heading Colors

Select a sample-like color scheme to style your article heading backgrounds

Photo Overlay Effect

Create a semi-transparent layer over photos by lowering opacity

Multi-Color Gradient Adjustment

Gradually adjust boundary positions between 3 or more colors by dragging

Basic Knowledge

Differences Between linear, radial, and conic

CSS gradients include 3 functions with different color transitions, all written in the background property.

linear-gradient：linear-gradient creates a linear gradient where color changes along a straight line at a specified angle.
radial-gradient：radial-gradient creates a circular gradient where color spreads outward from a center point in a circle or ellipse.
conic-gradient：conic-gradient creates a conic gradient where color changes clockwise around a center point.

Angle and Direction Keyword Correspondence

In linear-gradient, 0deg is upward, and values increase clockwise. You can also use direction keywords like "to right"; 90deg equals "to right" and 180deg equals "to bottom".

Color Stop and Transparency Syntax

A color stop specifies the position where a color appears in the gradient, with 0% being the start and 100% the end. For example, "#3B82F6 0%, #8B5CF6 100%" defines a transition from blue at the start to purple at the end.

#RRGGBB Format：#RRGGBB format represents colors using 2-digit hexadecimal values for red, green, and blue; #FF0000 is opaque red.
rgba Format：rgba format combines red, green, and blue values (0-255) with transparency (0-1); 0.5 transparency creates a semi-transparent color.