About the CSS Gradient Generator
Design a CSS gradient visually and copy the finished code. Choose linear or radial, set the angle, add and move color stops, or start from a preset such as Sunset, Ocean or Night. The preview updates as you edit, and the CSS is ready to paste into your stylesheet.
How to use it
- Pick Linear or Radial.
- Set the angle for a linear gradient.
- Add color stops and adjust their colors and positions, or start from a preset.
- Copy the generated CSS into your project.
Features
- Linear and radial gradients
- Adjustable angle and any number of color stops
- Presets to start from
- Live preview
- One-click copy of ready-to-use CSS, with a note on using it in Tailwind
Frequently asked questions
- How do I use the CSS I copy?
- Paste the background declaration into a rule for any element, for example a hero section or a button. The gradient is plain CSS and needs no library.
- What is the difference between linear and radial gradients?
- A linear gradient blends colors along a straight line at an angle you choose. A radial gradient blends outward from a center point in a circle or ellipse.
- Can I use these gradients in Tailwind CSS?
- Yes. Add the gradient as a custom value in your Tailwind configuration, or use an arbitrary value in a class, and paste the colors and angle from the generator.
Part of Octodius' free developer tools. Everything here runs in your browser.
