Gradient Code

Features

Gradient code generator can generate CSS gradient code, support linear and radial gradient types, flexible settings for multiple colors and their positions.

Main Features

1. Gradient Type Selection

Support linear and radial gradient types

2. Direction and Position Settings

Linear gradient supports 8 preset directions and custom angle, radial gradient supports multiple positions

3. Multi-color Support

Support 2-5 colors, each color can set position percentage

4. Dynamic Add/Delete

Can add or delete colors

5. Real-time Preview

Real-time preview of gradient effect

How to Use

1. Select gradient type
2. Set gradient direction or position
3. Add and set colors
4. View gradient preview
5. Click copy button to copy CSS code

Use Cases

• Web Design: Create complex gradient backgrounds
• UI Design: Create diverse gradient effects
• CSS Development: Generate gradient CSS code

FAQ

How many colors can I add at most?

Can add up to 5 colors.

How to set color position?

Color position indicates the position of that color in the gradient, 0% is start, 100% is end.