Free Online CSS Gradient Generator
Create beautiful gradient backgrounds with a visual editor: pick two colors, adjust direction and angle, and copy the CSS code in one click, with presets included.
Key Features
Two-Color Gradients
Freely choose start and end colors with a real-time gradient preview.
Angle Control
Drag a slider to adjust the gradient direction, from 0Β° to 360Β°.
Preset Gradients
Several curated color schemes built in β apply with one click when inspiration runs dry.
Copy Ready Code
Generates standard CSS code in real time; click copy to use it in your webpage.
How to Use
Pick colors
Click the start/end color blocks and choose your two colors.
Adjust the angle
Drag the angle slider to find the gradient direction that looks best.
Copy the code
Click copy to get the CSS code and paste it into your project.
Frequently Asked Questions
How do I use the generated code?
Paste the copied background declaration into any element's CSS, for example: body { your copied code }.
Does it support multi-color gradients?
Currently it supports two-color gradients. You can copy the code and add more color stops in CSS yourself, such as linear-gradient(90deg, red, orange, yellow).
Can I modify a preset gradient?
Yes. After applying a preset, keep adjusting colors or the angle to customize on top of it.
Can I enter a HEX value directly?
Yes. Enter a #RRGGBB hex value in the color picker to specify the exact color.