CSS Gradient
Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.
Open in editorStriped Gradient
Vertical stripes, each with its own gradient, slightly offset against each other. Export as PNG, JPG, WebP, SVG or CSS.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
A striped gradient splits a color gradient into vertical bands and shifts each band a little. It looks like light through ribbed glass or folded fabric and makes a striking background for covers, posters and websites.
How it works
Set your colors from top to bottom, then choose the number of stripes, how much their widths vary and how far they are offset. Shading adds light and shadow to every stripe. Press Space for new variants and export as PNG, JPG, WebP, SVG or CSS.
Try the Striped Gradient nowFAQ
- What does Offset do?
- Every stripe runs through the same colors but starts at a slightly different height. The higher the offset, the more the stripes are out of step. At 0 they line up into one continuous gradient.
- How do I get a fluted glass look?
- Use many narrow stripes, a small offset and strong shading. The Fluted glass preset is a good starting point.
- Is the SVG easy to edit?
- Yes. Apart from the optional grain it consists only of rectangles with linear gradients, without filters, so design apps such as Figma, Illustrator or Inkscape open it as editable shapes.
- Does the export look like the preview?
- Yes. Preview and export use the same graphic, and the offsets are computed from the seed. The same settings and seed always give the same result.
Ready-made gradients
More than 30 original gradients with CSS to copy, each one ready to adjust in the editor.
Browse the gradient collectionRelated generators
All generators in Gradients
Mesh Gradient
Soft, flowing color gradients from several blurred color fields. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Blurry Gradient
Dreamy backgrounds from large, strongly blurred color circles. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
CSS Patterns
Over 30 pure CSS patterns: dots, grids, stripes, waves and geometric shapes. Export as CSS, Tailwind, SVG or image.
Open in editor
Blob Generator
Organic shapes in one click, filled, outlined or with a gradient. Export as SVG or image.
Open in editor
SVG Waves
Layered waves for sections, headers and backgrounds. Export as SVG, CSS or image.
Open in editor