CSS Gradient Generator - Linear, Radial, Conic
Create perfect CSS gradients: linear, radial, conic.
Aperçu
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Paramètres
Supported formats
How it works
Choose gradient type (linear, radial, conic)
Add and position your colors on the bar
Adjust the angle or center of the gradient
Copy the automatically generated CSS code
Privacy guaranteed
100% local generation in your browser. No data sent to our servers.
Create a CSS gradient for web design
CSS gradients are essential for creating modern and attractive interfaces. Our generator allows you to create linear, radial and conic gradients in just a few clicks, without writing a single line of code. The result is clean, optimized CSS code ready to use in your web and mobile projects. Generate CSS code for linear, radial or conic gradients: multiple color stops, custom angle, smooth transition and modern browser compatibility — ready to paste into your stylesheet. Adjust hue, saturation, lightness and opacity with real-time preview, then copy clean CSS code (HEX, RGB, HSL) sRGB-compliant for your linear, radial gradients, colored shadows and modern filters.
Linear gradient for backgrounds
Linear gradient is perfect for hero sections, buttons and navigation bars. Choose an angle (0° to 360°) and define your colors with their positions. The CSS linear-gradient() code is generated instantly.
Radial gradient for lighting effects
Create lighting, halo or spotlight effects with radial gradient. Define the center, shape (circle or ellipse) and extent for impressive results on your cards and modals.
Conic gradient for charts and creative design
Conic gradient (conic-gradient) creates color transitions around a central point, like a wheel. Ideal for pie charts, color wheels, progress indicators and artistic designs. It's the most recent gradient type, supported by all modern browsers.
Create a rainbow gradient
With conic gradient, easily create rainbow effects by adding spectrum colors. Perfect for logos, badges and decorative elements that catch attention.
CSS gradient for Tailwind and modern frameworks
Our generator adapts to your tools. Get code in native CSS, Tailwind classes (from-*, via-*, to-*), or SCSS variables. The code is optimized for performance and cross-browser compatibility. Integrate it directly into React, Vue, Angular or any other framework.
Responsive gradient for mobile and desktop
CSS gradients are perfectly responsive and adapt to all screen sizes. Unlike images, they never lose quality and are extremely lightweight (a few bytes of CSS). It's the ideal solution for optimal mobile performance.
Free generator without signup or limits
Create as many gradients as you want, copy the code and use it in all your personal and commercial projects. No limits, no restrictions.
Tips for performant and accessible CSS gradients
Prefer 2 to 3 color stops for readable gradients. Check the contrast of text placed over them with a WCAG analyzer. Use background-attachment:fixed sparingly on mobile to preserve scrolling performance.