Design linear and radial gradients visually, explore curated presets and export CSS code.
Design linear and radial gradients visually, explore curated presets and export CSS code. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
A CSS gradient is an image the browser draws on the fly, so you can put it in background or background-image with no extra download, and it stays sharp at any size. The linear syntax is linear-gradient(angle, stop 1, stop 2, …). 0deg runs bottom to top, 90deg left to right and the default 180deg top to bottom, while 135deg gives the popular top-left to bottom-right diagonal. A radial-gradient spreads outwards from a centre point and is great for spotlights, glows or adding depth to buttons.
A colour stop combines a colour and a position, such as #f59e0b 0% and #10b981 100%. Adding stops in between controls the rhythm of the transition, and placing two stops at the same position (for example 50% and 50%) makes the colour switch instantly, which creates crisp stripes or split backgrounds. Every stop in this tool has its own position and opacity; opacity is exported as rgba(), which is handy for gradient overlays that keep white text readable on photos.
A few practical tips. If the two ends of a large gradient are far apart on the colour wheel, the middle can turn muddy grey, so add an intermediate stop or pick closer hues. Very subtle gradients may show visible steps (banding) on some screens; increasing the colour difference slightly or adding a third stop helps. For gradient text, set the gradient as the background and combine it with background-clip: text and color: transparent.
Modern browsers have supported unprefixed linear-gradient and radial-gradient for years, so the copied CSS works as is with no -webkit- prefix. Start from one of the preset templates, adjust the angle and stops, check the live preview, then copy the code in one click.
0deg goes bottom to top, 90deg left to right, 180deg (the default) top to bottom and 270deg right to left. 135deg is a top-left to bottom-right diagonal.
Put two neighbouring stops at the same position, such as red 50% and blue 50%. The colour switches at that point instead of blending.
Overlay a linear gradient from transparent to semi-transparent black, for example rgba(0,0,0,0) to rgba(0,0,0,0.6), so the text area darkens.
No. All major browsers have supported the standard syntax for years, so plain linear-gradient and radial-gradient are enough.
Browse this category: Design & Color
Convert HEX/RGB/HSL/CMYK formats and check WCAG 2.1 accessibility color contrast ratio.
Fine-tune CSS shadow and backdrop-filter glassmorphism effects, export CSS instantly.
Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness.
Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around!
