CSS Gradient Generator

Build linear, radial, conic, and repeating CSS gradients visually. Add color stops, pick presets, and copy the CSS instantly.

Color Stops
Preset Gallery
Generated CSS
Add or adjust color stops to build your gradient.

How to Use the CSS Gradient Generator

  1. Choose a gradient type — Linear for directional fades, Radial for circular bursts, Conic for color wheel effects, or Repeating for tiled patterns.
  2. Adjust the angle or position — for linear gradients, drag the angle slider. For radial, choose the shape and center position.
  3. Edit color stops — change the color using the color picker and drag the slider to set the stop position (0% to 100%). Click "+ Add Stop" to add more stops.
  4. Browse presets — click any swatch in the preset gallery to load a curated gradient instantly.
  5. Copy or download the CSS and paste it into your stylesheet as a background or background-image property.

Understanding CSS Gradients

CSS gradients are images generated by the browser using mathematical color transitions. They can be used anywhere a CSS image is valid: as a background, a background-image, a border-image, or even a list-style-image. Because they are resolution-independent, they look sharp on every screen density — from standard monitors to 4K displays and Retina devices — without any extra files or image assets.

Linear Gradients

linear-gradient() creates a color transition along a straight line. The direction can be specified as a keyword (to right, to bottom right) or as a precise degree angle. Angles work like a clock: 0deg points up, 90deg points right, 180deg points down. The default direction when no angle is specified is to bottom (180deg). Linear gradients are the most common type, used for button backgrounds, section dividers, header banners, and card overlays.

Radial Gradients

radial-gradient() radiates colors outward from a center point. The shape can be a circle (equal radius in all directions) or an ellipse (different horizontal and vertical radii). The center position can be set using CSS position keywords or pixel/percentage values. Radial gradients are used for spotlight effects, vignettes, glowing button backgrounds, and circular badge designs.

Conic Gradients

conic-gradient() rotates colors around a center point like a color wheel or pie chart. Unlike radial gradients, the transition happens along the angular axis, not the radial axis. Conic gradients are commonly used for pie charts (using hard stops), color wheels for design tools, progress indicator backgrounds, and decorative patterns. They are also composable with radial-gradient() to create donut chart effects.

Repeating Gradients for Patterns

repeating-linear-gradient() and repeating-radial-gradient() tile the gradient pattern when the stops do not cover the full 0%–100% range. This makes them ideal for creating CSS-only patterns: diagonal stripes, checkerboards (by layering multiple gradients), and radiating rings. A striped background can be created with just two stops: repeating-linear-gradient(45deg, #000 0%, #000 10%, transparent 10%, transparent 20%).

Multiple Gradients and Layering

CSS background properties accept multiple values separated by commas. This means you can layer multiple gradients on top of each other. For example, combining a radial gradient spotlight with a linear gradient base, or overlaying diagonal stripe patterns. Transparency is key — gradients with transparent stops let lower layers show through. This technique produces complex backgrounds without any image files. For more CSS design tools, explore the Box Shadow Generator and CSS Grid Generator.

Frequently Asked Questions

linear-gradient transitions colors along a straight line at a specified angle. radial-gradient transitions colors outward from a center point in a circular or elliptical shape. conic-gradient transitions colors around a center point like a color wheel or pie chart.
Add a percentage or length value after the color in the gradient function. For example: linear-gradient(to right, red 0%, blue 50%, green 100%). Without explicit positions, browsers distribute stops evenly. You can also use two stops at the same position to create a hard color transition with no fade.
Yes. Use background: linear-gradient(...), then add background-clip: text and -webkit-background-clip: text, and set color: transparent. This clips the gradient to the text shape, creating a gradient-filled text effect that works in all modern browsers.
repeating-linear-gradient and repeating-radial-gradient tile the gradient pattern infinitely. If your stops don't cover the full 0% to 100% range, the pattern repeats. For example, repeating-linear-gradient(45deg, red 0%, blue 20%) creates diagonal stripes by repeating the red-to-blue pattern every 20 percentage points.
CSS gradients are almost always better than image files for gradient backgrounds. They are resolution-independent (sharp on any screen density), zero file size, easily updated via CSS without touching images, and can be animated or transitioned with CSS. The only case for a gradient image is when you need a very complex photographic gradient or noise texture that CSS cannot replicate.