Webspe Tools

JP EN

Gradient Background CSS Generator

Create custom CSS gradient backgrounds with this free online generator.
Choose from linear, radial, or conic gradients and customize colors, angles, positions, and other settings with a real-time preview.
Copy the generated CSS code and use it directly in your website or web project.

Sponsored Links

Choose a template as a starting point, then customize it to your liking.
(* Your current settings will be reset.)

Click a template to apply it to the editor.

Customization

・Type

deg

Color Stops

  • Click the gradient bar to add a color stop.
  • Drag a handle left or right to adjust its position.
▼

Unit：%

▼ Edit Selected Color

・Color Stop List

  • %

    #22d3ee

  • %

    #8b5cf6

※

OKLCH can produce more vivid gradients, especially between contrasting colors, but it may not be supported in some older browsers.

CSS Code

background-image: linear-gradient(90deg, #22d3ee, #8b5cf6);

Notes

  • This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.

\ Share on social media /

Sponsored Links

Related Tools

View All Tools