Create linear, radial, and conic CSS gradients with a live preview. Copy as CSS or Tailwind classes instantly. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
background: linear-gradient(direction, color-stop1, color-stop2, ...); Direction can be a side keyword or an angle such as 135deg. Example: background: linear-gradient(135deg, #16a34a 0%, #0f766e 100%);
A conic gradient rotates around a center point. Syntax: background: conic-gradient(from 0deg at center, red, yellow, green); Supported in all modern browsers.
Two- or three-stop linear gradients at 0/45/90/135/180/225/270/315 degrees map to bg-gradient-to-* plus from-/via-/to- colours. Other angles, radial, and conic use an arbitrary bg-[…] class.
No. Gradient math and CSS generation run entirely in your browser. The tool does not need the network after the page has loaded.
Your data is processed entirely in your browser. Nothing is sent to any server.
Colour stops
Presets
CSS
background: linear-gradient(135deg, #16a34a 0%, #0f766e 100%);Tailwind
bg-gradient-to-br from-[#16a34a] to-[#0f766e]No data leaves your browser — this tool doesn't even need internet after loading.