Linear Gradient

Create linear gradient effect

📖 How to Use

Click to view detailed usage instructions

Expand

Features

Linear gradient generator can generate CSS linear gradient code, support custom gradient direction and color positions.

Main Features

1. Gradient Direction Selection

Support 8 preset directions and custom angle

2. Multi-color Support

Support 2-4 colors, each color can set position

3. Real-time Preview

Real-time preview of gradient effect

4. CSS Code Generation

Auto-generate complete CSS code

5. One-click Copy

Click to copy CSS code

How to Use

Select gradient direction
Set colors and their positions
View gradient preview
Click copy button to copy CSS code

Use Cases

Web Design: Add gradient background to web elements
UI Design: Create gradient buttons and icons
CSS Development: Generate gradient CSS code

FAQ

How to set gradient angle?

Select "Custom Angle" option, then drag slider or enter angle value (0-360 degrees).

What does color position mean?

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

How to create two-color gradient?

Only set color 1 and color 2, leave color 3 and color 4 empty.