Free CSS Gradient Generator Online

Writing `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` by hand is fine when you already know which colours and which angle you want. Most of the time, though, you are tweaking — bumping the angle two degrees, sliding a colour stop, trying a different second colour to see if it warms the whole thing up. Our free online CSS Gradient Generator gives you a visual editor for exactly that loop. Pick the gradient type (linear, radial, or conic), drop in colour stops at any position from 0% to 100%, set the angle for linear gradients or the centre point for radial ones, and watch the live preview update as you drag. The CSS code is generated underneath the preview in copy-ready form so you can paste it straight into a stylesheet, a Tailwind class, or a styled-components template literal. Multi-stop gradients are supported — add as many colour stops as you need, drag them along the bar to reposition, and remove the ones you do not want. The generator covers the three types of CSS gradient that ship with every modern browser: `linear-gradient` for the classic top-to-bottom or angled fades, `radial-gradient` for circular fades centred on a point, and `conic-gradient` for the colour-wheel style that has become popular for hero sections and interesting backgrounds. Real-world workflows: building a hero background that combines two brand colours, generating button hover states with a subtle gradient, creating a soft background pattern for a card layout, or experimenting with colour relationships before committing to a value in a design system. After generating, the [CSS Minifier](/tools/css-minifier) compresses the resulting CSS for production, and the [Color Picker](/tools/color-picker) is the right tool to choose the individual colours that go into the gradient.