Gradient Viewer

CSS gradients are smooth transitions between two or more colors, used for backgrounds, buttons, banners, and decorative elements. Unlike static images, CSS gradients are rendered by the browser, which means they scale perfectly at any resolution and can be animated.

There are two main types: linear gradients that create a straight-line transition in any direction (top to bottom, left to right, or any angle), and radial gradients that radiate outward from a center point in a circular or elliptical pattern.

Gradients add visual depth and modern styling without loading external images. They're ideal for hero sections, call-to-action buttons, card backgrounds, and overlay effects. Since they're pure CSS, they don't impact page load performance and work across all modern browsers.

CSS gradients can include multiple color stops, each with an optional position percentage. This allows for complex effects like hard color transitions (using adjacent stops), smooth multi-color blends, and even striped patterns.

Add color stops by clicking the plus button, then choose a color for each stop using the color picker. Drag the position slider to control where each color appears in the gradient. Switch between linear and radial gradient modes.

The gradient preview updates in real-time as you make changes. The CSS code panel below shows the generated code, ready to copy and paste into your stylesheet. You can also adjust the gradient angle for linear gradients and the shape for radial gradients.

Keep color stops within a similar hue range for smooth, natural transitions. Use contrasting colors for bold, eye-catching effects. The 60-30-10 design rule works well with gradients: use a dominant color for most of the gradient, a secondary color for the transition, and an accent color for highlights.

When designing for dark mode, consider how your gradient will look against dark backgrounds. Test with both light and dark themes to ensure readability of any text overlaid on the gradient.