CSS Gradient Generator with Ready-to-Use CSS Code

Gradient Presets

Everything you can do with this CSS generator

This online CSS gradient generator lets you easily create all types of gradients: linear-gradient, radial-gradient, conic-gradient and their repeating variants. Copy the generated CSS in one click and integrate it directly into your project.

CSS linear gradient

The linear-gradient() creates a gradient along a straight line at a defined angle. Use the visual compass or direction shortcuts to set the angle, then adjust as many color stops as needed with custom position and opacity.

Radial and conic gradient

radial-gradient() radiates from a center point, useful for light or depth effects. conic-gradient() rotates around a point, perfect for pie charts and rotary gradient effects.

CSS variables and webkit prefixes

Enable the var() option to generate a reusable CSS variable across your project. Enable -webkit- for compatibility with older Safari and Chrome browsers.