About this gradient generator
A CSS gradient is an image the browser draws from a list of colors, so it scales to any size without a file to download. A linear gradient blends the colors along a straight line set by an angle, where 0° runs from bottom to top and 90° from left to right; a radial gradient spreads them out in a circle from the center. Each color stop has a position from 0% to 100% that sets where that color is reached. This generator writes the standard background property, the same gradient as a Tailwind CSS arbitrary class, and an SVG file you can use in design tools or as an image.
How to make a CSS gradient
- Choose a type and angle. Pick linear or radial. For a linear gradient, drag the angle slider or press one of the common angles.
- Set the color stops. Change each color and its position, add up to eight stops, or press a preset to start from a ready-made gradient.
- Press Generate gradient. Check the preview as a banner, card, or button, then copy the CSS, the Tailwind class, or the SVG code, or download the SVG.
Frequently asked questions
How do I use the CSS code?
Paste the background line into the CSS rule for your element, for example .hero { background: linear-gradient(90deg, #7F00FF 0%, #E100FF 100%); }. It works in all modern browsers without prefixes.
Which direction does the angle point?
The angle is the direction the gradient travels: 0° goes from bottom to top, 90° from left to right, 180° from top to bottom, and 270° from right to left.
How do I use the Tailwind class?
Add the bg-[...] class to an element in a project using Tailwind CSS 3 or later. Spaces in the gradient are written as underscores, which Tailwind turns back into spaces.
How do I make a hard edge between two colors?
Give two neighboring stops the same position. For example, red at 50% followed by blue at 50% splits the area into two solid halves with no blending.
When should I use the SVG version?
Use it where CSS is not available, such as in design apps, presentations, or email images. It draws the same stops at 400 by 200 pixels and scales without losing quality.