CSS gradient generator
Quickly create a gradient background (linear-gradient) for a web page, with a real-time preview and CSS code ready to copy — without opening Figma or Photoshop.
How it works
A CSS linear gradient (linear-gradient) lets you create a visually rich background — banner, button, section backdrop — without an image or an external design tool. Choose two colors and an angle, watch the live preview, then copy the generated background property directly into your stylesheet. It's the fastest way to prototype a gradient background before refining it to match your brand guidelines.
Can I use more than two colors in a gradient?
CSS natively allows it (linear-gradient(90deg, #fff, #f00, #00f), for example), but this tool deliberately focuses on a two-color gradient, the most common use case for a section or button background. For a more complex gradient, you can copy the result generated here and then add extra color stops directly in your CSS.
What does the gradient angle represent?
The angle determines the direction the gradient progresses in: 0° goes from bottom to top, 90° goes from left to right, 180° goes from top to bottom, etc. This is the same convention natively used by the CSS linear-gradient() function, so the code copied here produces exactly the render you see in the preview.
100% local processing: the CSS code generation happens directly in your browser via WebAssembly, without any call to an external server.