Create linear, radial, and conic CSS gradients with a visual editor. Adjust colors, positions, and angles in real time, then copy the generated CSS. Choose from presets or build from scratch. No signup needed, everything runs in your browser.
Last updated: March 2026CSS gradients are image values generated by the browser that create smooth transitions between two or more colors. They are defined using CSS functions like linear-gradient(), radial-gradient(), and conic-gradient(), and can be applied to any property that accepts an image, including background-image, border-image, and list-style-image. Unlike raster images, gradients scale perfectly at any resolution and add zero HTTP requests to your page load, making them a lightweight and performant alternative to image backgrounds.
Gradients are constructed from color stops, which specify a color and optionally a position along the gradient line. The browser interpolates smoothly between adjacent color stops to produce the transition effect. You can have as few as two stops or as many as your design requires. When no position is given, the browser distributes stops evenly across the available space.
The linear-gradient() function creates a color transition along a straight line. The direction of that line is controlled by an angle value (such as 90deg for left-to-right or 180deg for top-to-bottom) or by a keyword pair like to bottom right. The angle is measured clockwise from the top of the element, so 0deg points upward, 90deg points right, 180deg points down, and 270deg points left.
Color stops in a linear gradient are placed along the gradient line. Each stop can include an optional percentage or length value that pins it to a specific position. For example, linear-gradient(90deg, #6C5CE7 0%, #00ff88 50%, #ff6b6b 100%) creates a three-color transition from purple through green to red, with the green appearing at the midpoint. You can create hard color boundaries instead of smooth transitions by placing two stops at the same position, which is useful for striped patterns.
The repeating-linear-gradient() variant tiles the gradient pattern within the element. This is especially useful for creating diagonal stripes, progress bar effects, and textile-like patterns. The pattern repeats from the last color stop position, so controlling the stop positions directly determines the size of each repeating tile.
Radial gradients emanate from a central point outward in a circular or elliptical shape. The radial-gradient() function accepts a shape keyword (circle or ellipse) and a position that determines the center of the gradient. The default shape is an ellipse that conforms to the element's aspect ratio, and the default position is the center of the element. Sizing keywords like closest-side, farthest-corner, and closest-corner control how far the gradient extends.
Conic gradients, introduced with conic-gradient(), rotate color transitions around a center point rather than radiating outward. This produces pie-chart-like segments and color wheels. The from keyword sets the starting angle, and the at keyword sets the center position. Conic gradients are particularly effective for creating progress indicators, color wheels, and decorative radial patterns. Combined with border-radius: 50%, a conic gradient can produce a smooth color wheel with a single line of CSS.
Gradients serve several practical roles in web design beyond decoration. They create depth and visual hierarchy when used as section backgrounds, pulling the user's attention toward content. Subtle gradients on cards and buttons convey dimensionality without the weight of drop shadows. Dark-to-transparent gradients layered over hero images improve text readability without fully obscuring the background photo.
Performance is one of the key advantages. Because gradients are rendered by the browser's painting engine, they require no network request and scale to any screen density. A gradient background adds effectively zero kilobytes to your page weight, compared to a raster image that might be 50-200KB. For responsive designs, gradients eliminate the need for multiple resolution-specific background images.
When combining gradients with other techniques, you can layer multiple gradient values in a single background declaration, separating them with commas. This opens up patterns like mesh gradients, noise overlays, and complex geometric backgrounds. The background-blend-mode property adds another dimension, allowing gradients to interact with each other and with background images through blend modes like multiply, screen, and overlay.
Linear and radial gradients have been supported in all major browsers since 2012. Internet Explorer 10 was the last browser to add support, and with IE's end-of-life in June 2022, vendor prefixes for gradients are no longer strictly necessary. Conic gradients reached broad support in 2020 with Safari 12.1, Chrome 69, and Firefox 83. As of March 2026, all modern browsers support all three gradient types without prefixes.
If you need to support older environments, this tool includes a vendor prefix toggle that adds -webkit- prefixed versions of your gradient. The -moz- prefix is no longer needed since Firefox dropped it after version 16. For truly legacy browsers, providing a solid fallback color before the gradient declaration ensures the element remains visible even when gradient support is absent.
Click the "Copy CSS" button to copy the generated gradient code to your clipboard. Then paste it into your CSS file as a property of the element you want to style. The most common usage is as a background property, like background: linear-gradient(90deg, #6C5CE7, #00ff88); applied to a div, section, or body element. You can also use it for border-image, list-style-image, or anywhere CSS accepts an image value.
Linear gradients transition colors along a straight line at a specified angle. Radial gradients emanate from a center point outward in a circle or ellipse. Conic gradients rotate colors around a center point like slices of a pie. Each type produces a distinct visual effect, and the choice depends on the design context. Linear gradients are the most common for section backgrounds, radial gradients for spotlight or vignette effects, and conic gradients for color wheels and pie-chart-like patterns.
Yes. CSS gradients support any number of color stops. This tool allows up to 10 stops per gradient. Click "Add Stop" to insert additional colors, drag the handles on the color bar to reposition them, and use the color picker to change each stop's color. More color stops allow you to create complex multi-hue transitions, rainbow effects, or precise color bands.
For the vast majority of projects in 2026, vendor prefixes are unnecessary. All modern browsers support unprefixed linear-gradient, radial-gradient, and conic-gradient. However, if your analytics show traffic from very old browsers or WebView implementations, you can enable the vendor prefix toggle in this tool to add -webkit- prefixed fallbacks. The -moz- prefix has not been needed since Firefox 16.
Repeating gradients tile the gradient pattern infinitely in both directions. The pattern's size is determined by your color stop positions. For example, a repeating-linear-gradient with stops at 0px and 20px will create a 20px-wide stripe that repeats across the entire element. This is useful for creating striped backgrounds, barber-pole effects, and progress bar animations without needing image files.