Gradient Previewer

A CSS gradient is a smooth transition between two or more colors, rendered directly by the browser as a background image. Gradients are defined using the background or background-image property with functions like linear-gradient(), radial-gradient(), or conic-gradient(). They're resolution-independent and don't require any image files, making them extremely performant.

Linear gradients transition colors along a straight line defined by an angle (e.g., 90deg for top-to-bottom). Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients sweep colors around a center point in a 360° rotation, creating pie-chart-like color transitions. Each type serves different design needs—linear for directional fades, radial for spotlight effects, and conic for angular color wheels.

Yes, CSS gradients enjoy excellent browser support. Linear and radial gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge (including IE10+). Conic gradients have slightly newer support but still work in all major browsers from 2020 onward. For older browsers, you can provide a solid fallback color. Our gradient previewer generates standard-compliant CSS that works everywhere.

You can add transparency by using RGBA or HSLA color values in your gradient stops. For example: rgba(99,102,241,0.8) gives you indigo at 80% opacity. You can also use the newer syntax with the color picker's alpha channel or manually edit the hex code with an alpha suffix (e.g., #6366f1cc where cc ≈ 80% opacity). This creates beautiful overlay effects when gradients are layered.

Absolutely! You can use as many color stops as you need—there's no practical limit. Each color stop can have an optional position value (percentage or length) to control where the transition occurs. Using 3-5 color stops is common for rich, complex gradients. Our tool lets you add unlimited color nodes and precisely position each one for full creative control.

Repeating gradients (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) tile the gradient pattern instead of stretching it across the entire element. By defining color stops within a specific range (e.g., 0px to 40px), the pattern repeats seamlessly. This is great for creating stripes, checkerboard effects, or patterned backgrounds without any image assets.

CSS gradients are very performant—they're rendered by the browser's compositing engine and don't require HTTP requests like image files. However, very complex gradients with many color stops (10+) or those used on thousands of DOM elements simultaneously may cause minor rendering overhead. For typical web usage (hero sections, buttons, cards), gradients have negligible performance impact and are often faster than loading equivalent images.

To apply a gradient to text, use the -webkit-background-clip: text property along with color: transparent. The gradient is painted as the background and clipped to the text shape. Example: background: linear-gradient(90deg, #6366f1, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;. This creates stunning gradient-filled typography that works in all modern browsers.

Color stops define the colors in your gradient and optionally where each color should appear. The position percentage (0%–100%) tells the browser where in the gradient that color peaks. For example, #ff0000 20% means red reaches full intensity at 20% of the gradient length. Without positions, colors are evenly distributed. Strategic positioning creates dramatic effects—like hard transitions when two stops share the same position or smooth fades with well-spaced stops.

Direct gradient animation (e.g., transitioning from one gradient to another) isn't smoothly supported by CSS transitions. However, you can achieve animated gradient effects using CSS animations with @keyframes that change the background-position or by shifting gradient angles. A popular technique is creating an oversized gradient background and animating its position to create a flowing, dynamic effect. The @property CSS rule (Chrome 85+) also enables smooth gradient color interpolation.

Gradients naturally scale with their container since they're percentage-based by default. Use relative positioning (percentages) for color stops rather than fixed pixel values to maintain proportions across screen sizes. For radial gradients, using ellipse shape adapts better to rectangular containers. Always test your gradient on mobile viewports—our previewer's responsive design lets you resize to check how gradients behave at different widths.