Passer au contenu principal

CSS Gradient Generator: linear, radial and conic gradient

Create and customize your CSS gradients in real time: linear-gradient, radial-gradient, conic-gradient and their repeating variants. Adjust angle, color stops, opacity and position — copy the ready-to-use CSS code in one click.

Real-time preview
°
background-image
background (shorthand)
CSS Variable

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.

Frequently asked questions

Choose the gradient type (linear, radial, or conic), adjust the angle or direction, then customize your color stops by modifying color, opacity, and position. T... Choose the gradient type (linear, radial, or conic), adjust the angle or direction, then customize your color stops by modifying color, opacity, and position. The CSS is generated automatically and can be copied in one click.

A linear-gradient follows a straight line at a defined angle (e.g. left to right, diagonal). A radial-gradient radiates outward from a center point, creating a ... A linear-gradient follows a straight line at a defined angle (e.g. left to right, diagonal). A radial-gradient radiates outward from a center point, creating a circular or elliptical effect. A conic-gradient rotates around a center point like clock hands.

Click the 'Add Stop' button to insert a new color stop. Each stop has its own color picker, opacity slider, and percentage position. You can create gradients wi... Click the 'Add Stop' button to insert a new color stop. Each stop has its own color picker, opacity slider, and percentage position. You can create gradients with 3, 4, 5 or more colors.

Copy the generated background-image or background property and paste it directly into your CSS. You can enable the -webkit- option for compatibility with older ... Copy the generated background-image or background property and paste it directly into your CSS. You can enable the -webkit- option for compatibility with older browsers, or the var() option to create a reusable CSS variable throughout your project.

The repeating-linear-gradient indefinitely repeats the gradient pattern defined by your color stops. It is ideal for creating stripe, hatch, or repetitive geome... The repeating-linear-gradient indefinitely repeats the gradient pattern defined by your color stops. It is ideal for creating stripe, hatch, or repetitive geometric pattern effects. The pattern size is determined by the position of the last color stop.

Use the opacity slider (α) on one of your color stops. Setting opacity to 0% makes the color fully transparent. The generator will automatically produce an rgba... Use the opacity slider (α) on one of your color stops. Setting opacity to 0% makes the color fully transparent. The generator will automatically produce an rgba() value in the CSS, allowing a clean transparent fade.

The conic-gradient is supported by all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). It covers over 95% of users in 2025. For older browser... The conic-gradient is supported by all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). It covers over 95% of users in 2025. For older browsers, you can use a linear-gradient as a fallback.

Tools in the same category

URL Encoder / Decoder CSS / JS / HTML Minifier Favicon Generator HEX / RGB / HSL Converter Binary/Decimal/Hexadecimal Converter HTML Viewer JSON Formatter Online Base64 Encoder Decoder

Popular tools

Materials Calculator Roof Slope Calculator Construction Schedule Generator Renovation Cost Calculator Employee Cost Calculator

Trending tools

Materials Calculator Roof Slope Calculator Construction Schedule Generator Renovation Cost Calculator Employee Cost Calculator
-->