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.
How to pick two colours that do not break in the middle
The most common gradient problem: you pick two beautiful colours and a dull gray middle appears between them. This happens because the browser blends the colours mathematically in sRGB space, and the path between opposite colours (blue to yellow, red to green) passes through a muddy zone. The easiest cure: pick two adjacent hues on the colour wheel (blue to purple, orange to pink), or add a third vivid colour stop in the middle to force the path around the gray.
Finer control of colour stops makes a big difference: the percentages after each colour decide where blending starts and ends. Repeat the same colour at two stops (like 0% and 40%) to get a solid colour area before the gradient begins — a common trick in button and header design.
Gradients in Arabic interfaces: the angle does not flip by itself
Unlike logical margins and paddings, gradient angles are purely physical: 90deg always means "towards the right" whether your page is Arabic or English. If you design a bar that fades from your brand colour at the reading start to a lighter shade at the end, you need two versions: one angle for the English UI and its mirror for Arabic (90deg versus 270deg). Keep the angle in a CSS variable and switch it with page direction instead of duplicating code.
And why a gradient instead of a background image in the first place? Because it is performance-free: no network request, razor sharp at any screen density, and it adapts to dark mode by swapping colour variables only — things an exported PNG from a design tool cannot offer.
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.
When blending two opposite colours (like blue and yellow), the computed path in sRGB space passes through a gray zone. Fix: add a vivid intermediate colour stop in the middle, or choose two adjacent hues on the colour wheel.
No. Gradient angles are physical: 90deg always points right regardless of page direction. If your design is directional, mirror the angle manually for the RTL version (e.g. 90deg becomes 270deg).