90°
Create beautiful gradients with live preview
A CSS gradient is a smooth transition between two or more colors. CSS supports three types of gradients: linear gradients (transitions along a straight line), radial gradients (transitions radiating from a center point), and conic gradients (transitions around a center point). Gradients are commonly used for backgrounds, buttons, and decorative elements.
CSS linear-gradient() creates a color transition along a straight line. You specify the direction (using degrees or keywords like "to right") and color stops. For example: background: linear-gradient(90deg, #8B5CF6, #EC4899) creates a horizontal gradient from purple to pink. The angle determines the direction: 0deg goes up, 90deg goes right, 180deg goes down.
Radial gradient in CSS creates a circular or elliptical color transition that radiates from a center point outward. The syntax is radial-gradient(shape size at position, color-stops). You can use "circle" or "ellipse" shapes, and position it anywhere on the element. It's perfect for spotlight effects, buttons, and circular elements.
To create a gradient background: 1) Use the background or background-image property. 2) Choose linear-gradient(), radial-gradient(), or conic-gradient(). 3) Specify at least two colors. Example: background: linear-gradient(to right, #667eea, #764ba2). You can add multiple color stops and adjust their positions using percentages.
CSS supports four types of gradients: 1) Linear gradients - colors transition along a straight line. 2) Radial gradients - colors radiate from a center point. 3) Conic gradients - colors rotate around a center point (like a color wheel). 4) Repeating gradients - any of the above that repeat infinitely.
To create gradient text: 1) Apply the gradient as background-image. 2) Set background-clip: text. 3) Make the text color transparent. Example: background: linear-gradient(90deg, #8B5CF6, #EC4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;. This technique works in all modern browsers.
Gradient banding occurs due to limited color depth, especially with subtle color transitions over large areas. Solutions: 1) Add slight noise or texture overlay. 2) Use more color stops for smoother transitions. 3) Avoid very subtle color differences over large distances. 4) Use oklch() color space for perceptually smoother gradients in modern browsers.
For gradient borders, use the border-image property: border-image: linear-gradient(90deg, #8B5CF6, #EC4899) 1. For rounded corners, use a pseudo-element technique: create a gradient background on ::before, position it behind the element, and use padding to create the border effect.
Color stops define where each color appears in the gradient and how it transitions. You can specify stops with percentages: linear-gradient(90deg, red 0%, yellow 50%, green 100%). Hard stops (same percentage for two colors) create sharp color boundaries instead of smooth transitions.
Use rgba() or transparent keyword for transparent gradients: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). This is commonly used for overlay effects on images. You can also use color with 0 alpha at any stop position to create fade effects.
CSS gradients can't be directly animated, but you can create animation effects by: 1) Using background-size larger than 100% and animating background-position. 2) Using CSS custom properties (variables) for colors. 3) Using multiple gradients and animating opacity. The most common technique uses a large background-size with smooth position animation.
Conic gradient creates colors that rotate around a center point, like a pie chart or color wheel. Syntax: conic-gradient(from 0deg at center, color1, color2, ...). It's perfect for pie charts, loading spinners, and circular progress indicators. Colors transition around the center rather than outward.
There's no practical limit to the number of colors in a CSS gradient. You can use as many color stops as needed. However, for performance and visual clarity, most designers use 2-5 colors. More colors are useful for rainbow effects or complex patterns.
Yes! CSS custom properties work great with gradients: :root { --color1: #8B5CF6; --color2: #EC4899; } background: linear-gradient(90deg, var(--color1), var(--color2));. This makes theme switching and dynamic updates easy, especially with JavaScript.
Use multiple backgrounds with gradient first: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg'). The gradient appears on top of the image. This technique is commonly used for hero sections to improve text readability over images.
Linear gradients transition colors along a straight line in one direction (horizontal, vertical, or diagonal). Radial gradients transition colors outward from a center point in a circular or elliptical pattern. Choose linear for directional effects and radial for spotlight or circular effects.
Use repeating-linear-gradient() or repeating-radial-gradient(). Define color stops that don't span the full element: repeating-linear-gradient(45deg, #8B5CF6 0px, #8B5CF6 10px, #EC4899 10px, #EC4899 20px). This creates stripes or patterns that repeat infinitely.
Gradient direction specifies which way colors transition. For linear gradients, use angles (0deg-360deg) or keywords (to top, to right, to bottom left, etc.). 0deg points up, 90deg points right. Keywords like "to right" are more readable than angles for common directions.
CSS mask-image accepts gradients: mask-image: linear-gradient(to right, transparent, black). This fades an element from invisible to visible. It's useful for fade effects, vignettes, and creative masking. Combine with mask-position and mask-size for more control.
While CSS can't automatically extract gradients from images, tools can analyze image colors and suggest gradients. Upload an image to color palette generators, then use those colors in your gradient. This ensures your gradient matches your design's color scheme.