CSS Gradient Generator

Choose colours, stops and direction, then copy the ready-made CSS.

Runs in your browser. Nothing is uploaded.

How to use it

  1. Choose linear or radial.
  2. Pick colours and where each one sits.
  3. Copy the CSS into your stylesheet.

Common uses

  • Hero backgrounds
  • Button styles
  • Card accents

Questions

Does it work in all browsers?

The linear-gradient and radial-gradient syntax is supported by all current major browsers.

Related tools

Meta Tag GeneratorCreate title, description and social tags.HTML PreviewerPreview HTML safely as you type.JSON Formatter and ValidatorFormat, minify and check JSON.