CSS Gradient

Build CSS gradients visually with a drag-and-drop editor. Supports linear, radial, and conic types. Copy production-ready CSS code with one click.

Key features

Visual editor for linear, radial, and conic gradients
Drag-and-drop color stop controls
One-click copy of clean CSS gradient code
Full-page preview to see your work in action

Guide

CSS gradients replace flat background colors with smooth transitions between two or more colors. They are rendered by the browser as generated images, which means they scale to any size without losing quality and add zero extra HTTP requests to your page load. A gradient can be subtle, like a white-to-light-gray background that adds depth to a section, or bold, like a multicolor hero section that grabs attention and establishes brand identity. CSS supports three types of gradients: linear, radial, and conic. Each type transitions colors differently and suits different design situations. Understanding all three gives you a full toolkit for creating backgrounds, overlays, decorative elements, and even complex patterns using pure CSS. Linear gradients transition colors along a straight line. The line can go in any direction, defined by an angle (in degrees) or by keywords like "to right," "to bottom," or "to bottom left." The simplest linear gradient uses two colors: .hero { background: linear-gradient(to right, #3b82f6, #8b5cf6); } This creates a horizontal gradient from blue to purple. The "to right" keyword means the gradient starts on the left edge with blue and ends on the right edge with purple. You can also express this as an angle: 90deg is equivalent to "to right," 180deg is equivalent to "to bottom" (the default), 0deg goes upward, and 45deg goes diagonally to the upper right. You can add more color stops to create complex transitions: .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f97316 100%); } The angle 135deg means the gradient flows from the top-left toward the bottom-right. Each color stop has a percentage that controls where in the gradient that color is at full strength. You can also use pixel values or other CSS length units instead of percentages for precise control over where each color appears. Color stop positioning lets you control the exact transition between colors. If you place two stops close together, the transition happens quickly. If you place them far apart, it is gradual. You can also define a range for a single color to create flat color bands: .banded { background: linear-gradient( to bottom, #3b82f6 0%, #3b82f6 20%, #8b5cf6 20%, #8b5cf6 40%, #f97316 40%, #f97316 60%, #34d399 60%, #34d399 80%, #f87171 80%, #f87171 100% ); } This creates five equal horizontal bands of solid color with no gradient between them, because each color ends at the same percentage where the next one starts. Radial gradients transition colors outward from a center point, creating circular or elliptical shapes. The default shape is an ellipse that matches the element's aspect ratio: .spotlight { background: radial-gradient(circle at 30% 40%, #fbbf24, #1e3a8a); } This creates a circular gradient with its center at 30% from the left and 40% from the top, transitioning from gold to dark blue. The shape keyword controls whether the gradient is circular (equal radius in all directions) or elliptical (stretches to fit the element). The size keyword controls how far the gradient extends: closest-side, farthest-side, closest-corner, or farthest-corner (the default). Radial gradients are useful for spotlight effects, glowing elements, vignettes, and decorative backgrounds. Here is a practical spotlight effect for a card: .card-spotlight { position: relative; overflow: hidden; } .card-spotlight::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.15), transparent 40%); pointer-events: none; } Combined with a small JavaScript snippet that updates the --mouse-x and --mouse-y custom properties on mouse move, this creates an interactive spotlight that follows the cursor across the card. Conic gradients transition colors around a center point, like the sweep of a clock hand. They are the newest of the three types and have interesting visual applications: .wheel { background: conic-gradient(from 0deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f87171); border-radius: 50%; width: 200px; height: 200px; } This creates a color wheel effect. Notice that the first and last colors match (#f87171) to create a seamless loop. Conic gradients are used for pie chart visuals, progress indicators, loading spinners, and decorative clock-face designs. Here is a simple pie chart using a conic gradient: .pie { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient( #3b82f6 0deg 120deg, #f59e0b 120deg 200deg, #ef4444 200deg 360deg ); } This creates a three-segment pie chart with blue taking 33%, yellow 22%, and red 45%. No JavaScript, no SVG, no canvas. Pure CSS. Color stops are the points in your gradient where a color is at full intensity. Between stops, the browser interpolates smoothly. You control stops with percentages, pixels, or other CSS length units: .stripe { background: linear-gradient( to right, #3b82f6 0%, #3b82f6 33%, #ffffff 33%, #ffffff 66%, #ef4444 66%, #ef4444 100% ); } When two adjacent stops share the same position (33% in this example), there is no smooth transition between them, creating a hard edge. This technique produces stripes, flags, and geometric patterns using pure CSS with no images. The French flag above uses exactly this approach. Transparency in gradients is achieved by using rgba(), hsla(), or the modern CSS color syntax with alpha values. A common use case is a fade-to-transparent overlay on an image: .image-overlay { position: relative; } .image-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100% ); } This overlay is fully transparent for the top 40% of the image, then fades to 70% black at the bottom, allowing text to be readable over the lower portion of the image. You see this pattern on nearly every hero section and card design that places text over a background photo. The 40% transparent zone ensures the interesting part of the image remains visible. Layering multiple gradients on a single element opens up creative possibilities. CSS allows multiple background values separated by commas, and they stack on top of each other (first listed is on top): .complex-bg { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, transparent 50%), linear-gradient(225deg, rgba(139, 92, 246, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.2), transparent 50%), linear-gradient(to bottom, #f8fafc, #e2e8f0); } The first two gradients add colored overlays from opposite corners. The third adds a warm glow in the upper right. The fourth provides the base background. This creates a subtle, multi-dimensional effect that makes your background feel rich and alive without any image assets. Repeating gradients create patterns. Both linear and radial gradients have repeating variants: .stripes { background: repeating-linear-gradient( 45deg, #f8fafc 0px, #f8fafc 10px, #e2e8f0 10px, #e2e8f0 20px ); } This creates diagonal stripes at a 45-degree angle, alternating between two colors every 10 pixels. Repeating gradients are useful for progress bars, loading indicators, hazard stripes, paper-line effects, and decorative borders. A repeating radial gradient can create a polka-dot pattern: .dots { background: radial-gradient(circle, #3b82f6 2px, transparent 2px); background-size: 20px 20px; } The background-size property controls the spacing between dots. This technique creates lightweight, scalable patterns without any image files. Performance is one of the strongest arguments for CSS gradients over image backgrounds. A gradient is defined by a few bytes of CSS and rendered by the GPU. An equivalent image might be 50KB or more, requires an HTTP request to download, needs to be stored in the browser cache, and can look blurry on high-DPI (Retina) screens if not provided at 2x resolution. Gradients scale perfectly at any resolution and any screen density. They never need to be downloaded. For backgrounds, overlays, section dividers, and decorative effects, gradients almost always outperform images in both file size and visual quality. However, there is a performance caveat with animations. Animating gradient properties (like changing colors, stop positions, or angles) forces the browser to repaint the element on every frame, which is computationally expensive and can cause jank on complex pages. If you need an animated gradient effect, the recommended approach is to use a static gradient that is wider than the element and animate the background-position property, which can be GPU-accelerated: .animated-gradient { background: linear-gradient(270deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); background-size: 300% 100%; animation: gradient-shift 6s ease infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } This creates a smoothly shifting gradient effect that runs efficiently because only background-position changes, not the gradient definition itself. The background-size: 300% makes the gradient three times wider than the element, giving plenty of room for the position to shift. Gradient text is a popular design trend that applies a gradient effect to text characters. You achieve this using background-clip: .gradient-text { background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } This works in all modern browsers. The text acts as a mask for the gradient background, creating colorful headings without images. The -webkit- prefix is still needed for Safari. Keep in mind that gradient text can reduce readability at small font sizes and on low-contrast color combinations, so reserve it for headings and display text where the font size is large enough to see the gradient clearly. For card borders with gradient effects, the border-image approach works well: .gradient-border-card { border: 2px solid; border-image: linear-gradient(135deg, #3b82f6, #8b5cf6) 1; } Note that border-image does not work with border-radius. For rounded gradient borders, use a pseudo-element technique or the newer @property-based approach: .gradient-border-rounded { position: relative; background: white; border-radius: 12px; } .gradient-border-rounded::before { content: ''; position: absolute; inset: -2px; border-radius: 14px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); z-index: -1; } This creates a pseudo-element slightly larger than the card, places the gradient on it, and positions it behind the card. The visual result is a gradient border that works with rounded corners. Design guidance for gradient usage: keep it intentional. A gradient should serve a purpose, whether that is adding depth, directing the eye, establishing a mood, or creating visual separation between sections. The most common mistake is using too many colors or too much contrast, which makes the gradient feel chaotic and unprofessional. Start with two colors that are close on the color wheel (analogous) for a natural, sophisticated look. If you want more energy, use colors further apart. If the gradient is a background for a content area, keep it subtle so it does not compete with the content. If it is a hero banner or a promotional element, it can be bolder. Avoid pure black (#000000) in gradients. Black creates flat, dead spots in transitions because it has no hue information for the browser to interpolate. Instead, use a very dark version of one of your gradient colors, like a deep navy (#0f172a) instead of black. This keeps the gradient feeling alive and chromatically connected. The same applies to pure white (#ffffff) in colored gradients. Use a very light tint of your gradient colors instead. For section dividers, gradients create smooth visual transitions between differently colored page sections: .section-transition { height: 100px; background: linear-gradient(to bottom, #f8fafc, #1e293b); } This replaces the hard line between a light section and a dark section with a smooth blend, creating a more polished, modern feel. Browser support for CSS gradients is excellent. Linear and radial gradients work in all modern browsers and have for years. Conic gradients are supported in Chrome, Firefox, Safari, and Edge. The -webkit- prefix is no longer needed for linear and radial gradients in current browser versions, but some older Webkit-based mobile browsers may still require it. For broad compatibility, you can include a solid color fallback: .hero { background: #3b82f6; /* fallback */ background: linear-gradient(to right, #3b82f6, #8b5cf6); } Browsers that do not support gradients will use the solid color. Browsers that do support gradients will override it with the gradient. Mesh gradients are an emerging technique that goes beyond the three standard CSS gradient types. A mesh gradient uses multiple color points distributed across a 2D surface, creating smooth, organic color fields that look like the blended color backgrounds popular in modern design (Apple, Instagram, and Stripe use them prominently). CSS does not natively support mesh gradients yet, but you can approximate them by layering multiple radial gradients: .mesh-gradient { background: radial-gradient(at 20% 30%, rgba(59, 130, 246, 0.8) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(139, 92, 246, 0.8) 0%, transparent 50%), radial-gradient(at 50% 80%, rgba(249, 115, 22, 0.6) 0%, transparent 50%), radial-gradient(at 90% 90%, rgba(236, 72, 153, 0.5) 0%, transparent 50%), linear-gradient(to bottom right, #f8fafc, #e2e8f0); } Each radial gradient acts as a color blob at a specific position. The overlapping transparent edges blend smoothly. Adjust the positions, sizes, and colors to create different moods. This technique requires experimentation, which is where a visual gradient builder saves significant time. Gradients in responsive design need consideration. A gradient that looks balanced on a desktop monitor may look stretched or compressed on a mobile screen due to the different aspect ratio. Use percentage-based color stops rather than pixel values for most gradients so they scale proportionally. For critical hero gradients, test on both portrait (mobile) and landscape (desktop) aspect ratios. The gradient angle may need adjustment between breakpoints: .hero-gradient { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } @media (max-width: 768px) { .hero-gradient { background: linear-gradient(180deg, #3b82f6, #8b5cf6); } } On desktop, the 135-degree diagonal gradient works well with the wide aspect ratio. On mobile, a vertical (180-degree) gradient may distribute color more evenly across the tall, narrow viewport. Accessibility considerations apply to gradients as well. Ensure that any text placed on a gradient background maintains sufficient contrast throughout the gradient's range. A gradient from white to dark blue may have adequate contrast at the dark end but insufficient contrast at the light end. Use a solid semi-transparent overlay behind text, or restrict text placement to the portion of the gradient where contrast is guaranteed. For print stylesheets, gradients can be problematic. Some printers render CSS gradients poorly or not at all. In your print stylesheet, replace gradients with solid fallback colors: @media print { .hero { background: #3b82f6 !important; } } This ensures printed versions of your page look clean rather than showing rendering artifacts. Gradient color interpolation in CSS is evolving. Traditional gradients interpolate in the sRGB color space, which can produce muddy, desaturated mid-tones when transitioning between distant hues. CSS now supports specifying the interpolation color space directly in the gradient function: .vivid-gradient { background: linear-gradient(in oklch, to right, #3b82f6, #fbbf24); } The "in oklch" keyword tells the browser to interpolate through the OKLCH perceptual color space instead of sRGB. The result is a vibrant transition that passes through vivid intermediate hues (in this case, through greens and cyans) rather than the dull gray-brown that sRGB interpolation produces for a blue-to-yellow gradient. This feature works in Chrome, Safari, and Firefox as of 2025. For gradients where color vibrancy matters, OKLCH interpolation produces noticeably better results. CSS Houdini's @property rule opens up gradient animation possibilities that were previously impossible. By registering a custom property with a specific syntax, you can animate individual color stops: @property --gradient-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } .rotating-gradient { --gradient-angle: 0deg; background: conic-gradient(from var(--gradient-angle), #3b82f6, #8b5cf6, #ec4899, #3b82f6); animation: spin-gradient 4s linear infinite; } @keyframes spin-gradient { to { --gradient-angle: 360deg; } } This rotates a conic gradient smoothly because the browser knows --gradient-angle is an angle type and can interpolate it. Without @property, the browser treats the custom property as a string and cannot animate it, resulting in a jarring jump from start to end. This technique works in Chrome and Edge, with growing support in other browsers. Gradient-based dividers and decorative elements can replace image assets throughout your design. A simple horizontal rule with a gradient: hr.gradient-divider { border: none; height: 2px; background: linear-gradient(to right, transparent, #3b82f6, transparent); } This creates a centered line that fades in from the left, peaks in the middle, and fades out to the right. It is more visually interesting than a solid line and weighs zero bytes compared to a decorative image. Gradient fallback strategies matter for progressive enhancement. While gradient support is excellent in modern browsers, some email clients, older mobile browsers, and specialized rendering engines (like those in e-readers or smart TV browsers) may not support gradients. Always declare a solid color fallback before the gradient: .button { background-color: #3b82f6; background: linear-gradient(to bottom, #60a5fa, #2563eb); } The solid color is ignored by browsers that understand the gradient, but it provides a reasonable appearance for those that do not. This two-line pattern costs nothing in terms of file size and ensures your design degrades gracefully. For SVG exports, CSS gradients can be converted to SVG gradient definitions when you need the same visual effect in non-HTML contexts. SVG uses linearGradient and radialGradient elements with stop children: <defs> <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#3b82f6" /> <stop offset="100%" style="stop-color:#8b5cf6" /> </linearGradient> </defs> <rect fill="url(#myGradient)" width="100%" height="100%" /> When your gradient needs to appear in an SVG icon, chart, or illustration, converting the CSS values to SVG syntax ensures visual consistency between HTML and SVG elements in your design. Gradient naming in your design tokens helps team communication. Instead of referencing gradients by their CSS values, name them by purpose or visual character: --gradient-hero-primary, --gradient-card-highlight, --gradient-overlay-dark. Store gradient values as CSS custom properties: :root { --gradient-hero-primary: linear-gradient(135deg, #3b82f6, #8b5cf6); --gradient-card-highlight: linear-gradient(to bottom, rgba(59,130,246,0.05), transparent); --gradient-overlay-dark: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7)); } .hero { background: var(--gradient-hero-primary); } .card { background: var(--gradient-card-highlight); } .image-section::after { background: var(--gradient-overlay-dark); } This approach makes gradients reusable, consistent, and easy to update across your entire site from a single location. The CSS gradient generator gives you a visual interface to experiment with all of these techniques. Instead of writing gradient code, refreshing your browser, adjusting values, and refreshing again, you drag color stops around, change angles with a visual control, toggle between linear, radial, and conic types, and see the result update instantly on a live preview. When you find the right look, copy the production-ready CSS with one click and paste it directly into your stylesheet. This workflow is faster than manual coding and significantly reduces the trial-and-error cycle that gradient design usually involves.

Frequently asked questions

Can I use the code directly in my project?

Yes. The generated code is standard CSS that works in all modern browsers.

How do I add transparency?

Click on a color stop and use the picker to set its opacity. I'll include the rgba() values for you!

Are CSS gradients better for performance than background images?

Yes. A gradient is a few bytes of CSS rendered by the GPU, with no HTTP request and no loss of quality on high-DPI screens. An equivalent background image adds a file download and can look blurry on Retina displays unless served at 2x resolution. For backgrounds and overlays, gradients are almost always faster than images.

Why does my gradient look dull or muddy in the middle?

sRGB interpolation between distant hues passes through desaturated mid-tones. Use analogous colors (close on the color wheel), or switch the interpolation space with the modern "in oklch" syntax, for example linear-gradient(in oklch, to right, #3b82f6, #fbbf24), which produces a vivid transition supported in current Chrome, Safari, and Firefox.