Your files stay on your device
CSS Gradient Builder: Linear, Radial, Conic
Linear, radial, and conic gradients with ordered stops, a live preview, CSS and Tailwind output, and PNG export.
from 135°
CSS
linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #ec4899 100%)
Tailwind arbitrary value
bg-[linear-gradient(135deg,#1d4ed8_0%,_#7c3aed_50%,_#ec4899_100%)]
Stops with alpha are flattened over white for the PNG and the copyable strings. CSS gradients composite against whatever sits behind them, and a downloaded PNG has no backdrop. Kind, angle, and the opaque 6-digit stop colors + positions ride the URL; alpha stops share as flattened hex.
- 0%
- 50%
- 100%