CSS gradients without the syntax headaches
CSS gradient syntax is powerful but verbose. A multi-stop linear gradient with a specific angle, carefully chosen colours, and precise stop positions requires a long CSS string that is difficult to write from memory and tedious to adjust manually. The visual generator lets you build gradients interactively — drag stops, pick colours, adjust the angle — and copies clean production-ready CSS instantly.
Linear gradients
A linear gradient transitions colours along a straight line defined by an angle. The angle is measured in degrees clockwise from the top: 0deg goes bottom-to-top, 90deg goes left-to-right, 135deg goes top-left to bottom-right (diagonal). The generated CSS: linear-gradient(135deg, #6366F1 0%, #EC4899 100%). The angle slider in the tool lets you rotate the gradient direction in real time while watching the preview update.
Radial gradients
A radial gradient radiates outward from a centre point. The most common form is a circular gradient: radial-gradient(circle, #6366F1 0%, #EC4899 100%). Radial gradients work well for spotlight effects, button hover states, and backgrounds that should feel lit from the centre. The shape can be circle (perfectly round) or ellipse (scaled to the element's dimensions).
Conic gradients
Conic gradients rotate colour stops around a centre point, like a colour wheel or a pie chart. conic-gradient(from 0deg, red, yellow, green, blue, red) produces a full-spectrum colour wheel. Conic gradients are newer and less widely known but create distinctive visual effects impossible with linear or radial. They are excellent for pie charts in pure CSS, colour pickers, and angular decorative elements.
Colour stops
Colour stops define where each colour appears along the gradient and how much of the gradient it occupies. A stop at 0% is the start, 100% is the end. Adding a stop at 50% creates a midpoint colour. Placing two stops of the same colour adjacent (e.g., red 40%, red 60%) creates a hard colour boundary with no transition. This technique produces striped gradients.
The presets gallery
The 10 preset gradients cover common aesthetic directions: indigo/violet for tech and productivity, sunset orange/pink for energy and warmth, ocean blue/purple for calm and depth, forest green/blue for nature and growth. Apply a preset as a starting point, then customise the colours and angle for your specific needs. The preset names reflect the emotional tone, not rigid colour rules.