CSS Gradient Generator
Design linear and radial gradients visually and copy ready-to-use CSS code.
How to Use the CSS Gradient Generator
Choose Type
Select between Linear or Radial gradient.
Pick Colors
Click each color swatch to choose your colors. Optionally add a middle color stop.
Adjust Angle
Drag the angle slider to change the direction of the linear gradient from 0 to 360 degrees.
Copy the Code
Click "Copy CSS" and paste the code directly into your stylesheet.
About CSS Gradient Generator
The Adawix CSS Gradient Generator lets you create professional color gradients using CSS without writing code manually. It supports linear-gradient and radial-gradient with customizable angle and multiple color stops. The output is ready-to-paste CSS compatible with all modern browsers.
Color gradients are a fundamental element of modern UI design, used in buttons, backgrounds, cards, and banners. The tool generates code compatible with all modern browsers without any vendor prefixes. Completely free and works offline in your browser. For more productivity, also try: Color Picker, JSON Formatter, or Image Compressor.
CSS Gradient FAQ
linear-gradient produces a gradient along a straight line at a specified angle, while radial-gradient produces a gradient that radiates from a center point outward.
Use rgba colors with an alpha value below 1, e.g. rgba(255,0,0,0.5) for semi-transparent red.
Yes. linear-gradient and radial-gradient are supported in all modern browsers without any prefix since 2013.
Use the "Add color" button in the tool, or manually add comma-separated color stops: linear-gradient(45deg, #f00, #0f0, #00f).
Yes, the generated CSS code works with any HTML element: page backgrounds, buttons, cards, headers, and more.