How to Create CSS Gradients

linear-gradient. The most common type. A color transition along a straight line. You can control the direction (top to bottom, left to right, custom angle) and add as many color stops as you want.

radial-gradient. Colors radiate from a center point outward, as a circle or ellipse. Perfect for creating light effects, glowing buttons, or subtle backgrounds.

conic-gradient. Colors rotate around a center point, like sectors of a color wheel. Ideal for creating pie charts, gauges, or rainbow effects.

repeating-linear-gradient / repeating-radial-gradient. Repeating versions, perfect for creating striped patterns or textures.

Analogous colors. Choose colors adjacent on the color wheel (blue → purple, orange → red). Transitions are naturally harmonious and smooth.

Complementary colors. Opposite colors on the wheel (blue → orange). Caution: direct transitions can create a grey zone in the middle. Add an intermediate color to avoid this.

Monochrome. Variations of the same hue (light blue → dark blue). Always elegant and professional. Perfect for subtle backgrounds.

Avoid abrupt transitions. The farther apart colors are on the wheel, the more intermediate stops you need to smooth the transition.

Pro tip: use the oklch() color space for perceptually uniform transitions. Gradients in oklch are more natural than those in RGB.

Step 1: Choose the type. Linear, radial, or conic. Each type has its own customization options.

Step 2: Select your colors. Use the color picker to choose your stops. Add, remove, or reorder stops with a click.

Step 3: Adjust direction and positions. Change the angle, starting point, and exact position of each stop for total control.

Step 4: Copy the CSS code. CSS code is generated in real time. Copy and paste it directly into your stylesheet.

Live preview, gradient history, and popular palette suggestions included.

Section backgrounds. A subtle gradient between two close tones adds depth without distracting from content. This is the most common use in modern web design.

Buttons and CTAs. A gradient makes buttons more dynamic and attractive than a flat color. Add a slight gradient change on hover for a satisfying effect.

Gradient text. With background-clip: text, you can apply a gradient directly to text. Very trendy for headings and logos.

Image overlays. A semi-transparent gradient over an image improves text readability on top.

Borders. Border-image with gradients creates colored borders impossible with classic border-color.

CSS gradients are performant. Unlike images, they are vectorial (no pixelation), lightweight (a few bytes of code vs KB of image), and GPU-rendered.

Prefer CSS over images. A CSS gradient is always faster to load and sharper than a gradient image. It also naturally adapts to all screen sizes.

Limit the number of stops. More than 4-5 stops makes the code complex and preview difficult. For very complex gradients, consider SVG.

Test on mobile. Gradients can look different on OLED vs LCD screens. Always test on multiple screen types.

Accessibility. Ensure text on a gradient background remains readable at all points. Check WCAG contrast at each end of the gradient.