CSS Gradient Generator
Create beautiful CSS gradients visually. Build linear, radial, and conic gradients with multiple color stops, then copy the CSS code directly into your project.
About CSS Gradient Generator
CSS gradients allow you to display smooth transitions between two or more colors without using image files. They are created entirely in the browser using CSS, which means faster load times, perfect scaling at any resolution, and easy customization. Gradients are widely used for background colors, button styles, text effects, overlays, and decorative elements throughout modern web design.
A linear gradient creates a color transition along a straight line. You control the direction (using keywords like to right, to bottom, or diagonal directions) or specify an exact angle in degrees. The gradient progresses smoothly from the first color stop to the last along that line. Linear gradients are the most commonly used type and are ideal for background washes, hero sections, and button effects.
A radial gradient radiates outward from a center point in an elliptical or circular pattern. This is useful for spotlight effects, glowing buttons, and circular ornamental designs. You can control the center position and shape (circle or ellipse) to achieve different visual results.
A conic gradient sweeps around a center point like the hands of a clock. Unlike radial gradients, conic gradients create color transitions that go around the center rather than outward from it. They are perfect for pie charts, color wheels, spinner animations, and geometric designs.
Color stops define where each color begins and ends within the gradient. By default, color stops are evenly distributed, but you can position them manually using percentages. A stop at 0% is at the start of the gradient and a stop at 100% is at the end. Using multiple stops with varying positions gives you full creative control over how colors blend and transition.
FAQ
Q: How do I use a CSS gradient as a background?
Use the background or background-image property with the gradient function. For example: background: linear-gradient(to right, #667eea, #764ba2);. The "Copy background" button in this tool generates the full property for you to paste directly into your CSS file.
Q: Can I combine a gradient with a background image?
Yes. CSS supports multiple background layers separated by commas. You can layer a gradient over an image: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg');. The gradient acts as an overlay on top of the image.
Q: Are CSS gradients supported in all browsers?
Yes, linear and radial gradients are supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and all mobile browsers. Conic gradients have slightly less support in very old browser versions but are fully supported in all browsers released since 2021.
Q: How do I create a transparent gradient?
Use transparent as a color stop value, or use an rgba color with 0 alpha. For example, linear-gradient(to right, #4f46e5, transparent) creates a gradient that fades from purple to transparent. This is commonly used to create gradient overlays on images or to fade content edges.
Q: What is the difference between using deg and keyword directions?
Keyword directions like to right and to bottom left are intuitive descriptions of direction. The angle equivalent uses degrees where 0° points up and degrees increase clockwise: to top = 0deg, to right = 90deg, to bottom = 180deg, to left = 270deg. Specific angles like 45deg or 135deg allow gradients at any direction, not just the 8 cardinal directions.