CSS-код
background: #667eea; background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%);
Скачать как изображение
Вариации
Нажмите на вариацию для копирования CSS
About CSS Gradient Generator
Creating beautiful, smooth color transitions in CSS can require complex syntax. Our free online CSS Gradient Generator provides a visual interface to design linear and radial gradients and instantly generates the cross-browser CSS code.
How It Works
The tool provides a visual color picker and angle controls. As you adjust the colors, stops, and direction, it dynamically updates a preview box and simultaneously writes the corresponding `background: linear-gradient(...)` CSS rules.
Common Use Cases
- Designing modern, colorful backgrounds for website headers
- Creating stylish gradient buttons or UI elements
- Generating complex multi-color transitions without writing code manually
- Ensuring gradient code is compatible across different browsers
Frequently Asked Questions
A linear gradient transitions colors along a straight line (e.g., top to bottom, or diagonally). A radial gradient transitions colors outward from a central point in a circular or elliptical shape.
In modern web development, standard CSS gradients are fully supported by all major browsers. Vendor prefixes are generally no longer required unless you are supporting very old browser versions.