Gradient Generator
Create CSS gradient code from color stops with linear, radial, and conic options. Enter values for instant results with step-by-step formulas.
Formula
linear-gradient(angle, color1 stop1%, color2 stop2%) | radial-gradient(shape, colors) | conic-gradient(from angle, colors)
CSS gradients define smooth transitions between colors. Linear gradients follow a straight line at a specified angle, radial gradients expand outward from a center point, and conic gradients rotate around a center point. Color stops define where each color appears in the transition.
Worked Examples
Example 1: Modern Blue-Purple Linear Gradient
Problem: Create a 135-degree linear gradient from #3B82F6 (blue) to #8B5CF6 (purple) for a hero section background.
Solution: Type: linear-gradient\nAngle: 135deg (top-left to bottom-right)\nColor 1: #3B82F6 at 0%\nColor 2: #8B5CF6 at 100%\nCSS: background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);\nTailwind: bg-gradient-to-br from-blue-500 to-violet-500\nColor distance: 123 (smooth transition)
Result: CSS: background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
Example 2: Three-Color Sunset Gradient
Problem: Create a warm gradient with orange, pink, and purple for a card background.
Solution: Type: linear-gradient\nAngle: 135deg\nColor 1: #F97316 (orange) at 0%\nColor 2: #EC4899 (pink) at 50%\nColor 3: #8B5CF6 (purple) at 100%\nCSS: background: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #8B5CF6 100%);\nSmooth analogous transition through warm spectrum
Result: CSS: background: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #8B5CF6 100%);
Frequently Asked Questions
What is a CSS gradient and what types are available?
CSS gradients are smooth transitions between two or more colors, rendered by the browser without requiring image files. There are three main types: linear-gradient (transitions along a straight line at a specified angle), radial-gradient (transitions outward from a center point in a circular or elliptical shape), and conic-gradient (transitions around a center point like a color wheel). Each type also has a repeating variant (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) that tiles the gradient pattern. Gradients are technically CSS images and can be used anywhere an image value is accepted, including backgrounds, list-style-image, border-image, and even as mask images for advanced visual effects.
What are color stops and how do they affect gradient appearance?
Color stops define the position where a specific color appears in the gradient, specified as a percentage (0% to 100%) or length value. The browser smoothly interpolates colors between adjacent stops. By default, colors are evenly distributed, but moving stop positions creates asymmetric transitions. For example, placing a stop at 70% instead of 50% makes the first color dominant for longer before transitioning. You can also use two positions for a single color (like 'blue 30% 60%') to create a solid band of that color within the gradient. Hard color stops (two different colors at the same position) create sharp lines instead of gradual transitions. Understanding stop positioning is key to achieving precise control over gradient appearance.
How do I choose gradient colors that work well together?
The best gradient color combinations follow color theory principles. Analogous colors (30-60 degrees apart on the color wheel) produce the smoothest, most natural gradients: blue to purple, green to teal, or orange to red. Monochromatic gradients (same hue, different lightness) are safe and elegant. For bolder designs, use complementary colors but add a middle stop to prevent muddiness. Popular gradient combinations include: blue to purple (tech and creative), orange to pink (warm and energetic), teal to green (nature and health), and dark blue to black (elegant and premium). Avoid combining warm and cool colors directly without an intermediate stop, as the midpoint often appears gray or brown.
How do linear gradient angles work in CSS?
Linear gradient angles in CSS specify the direction of the color transition. Zero degrees (0deg) points upward, and angles increase clockwise: 90deg points right, 180deg points down, and 270deg points left. CSS also accepts keyword directions: 'to right' equals 90deg, 'to bottom' equals 180deg, 'to top left' equals 315deg, and so on. Diagonal keywords like 'to bottom right' adapt to the element aspect ratio (the gradient line goes corner to corner), while angle values create fixed-angle gradients regardless of the element shape. The most common angles are 90deg (horizontal), 180deg (vertical), 135deg (diagonal top-left to bottom-right), and 45deg (diagonal bottom-left to top-right).
What is the difference between radial gradient circle and ellipse shapes?
Radial gradients can use either a circle or ellipse shape. A circular radial gradient expands equally in all directions, maintaining a perfect circle regardless of the element dimensions. An elliptical gradient stretches to match the element aspect ratio, creating an oval that fills the element naturally. The default shape is ellipse. Size keywords control how far the gradient extends: closest-side stops at the nearest edge, farthest-side extends to the furthest edge, closest-corner stops at the nearest corner, and farthest-corner (default) extends to the furthest corner. You can also specify the center position using 'at X Y' syntax, such as 'radial-gradient(circle at 25% 75%, blue, red)' to offset the gradient origin from the element center.
How do I create a CSS gradient border?
CSS gradient borders can be created using the border-image property or the background technique. The border-image approach uses: border-image-source set to your gradient, border-image-slice set to 1, and border-width set to your desired thickness. However, border-image does not support border-radius. The more flexible background technique uses a gradient background on the element with a solid-color background on a pseudo-element or inner element to create the illusion of a gradient border. The padding between the backgrounds determines the border thickness. Another modern approach uses the CSS outline or box-shadow with gradient overlays. For rounded gradient borders, use a combination of background-origin, background-clip, and padding to achieve the effect with full border-radius support.