How to use it
- Linear runs along an angle: 90° is left to right, 180° top to bottom.
- Radial spreads out from a center point.
- Conic sweeps around the center like a color wheel.
A stop’s position (0–100%) is where that color is pure; the space between stops is the blend.
Worked example
linear-gradient(135deg, #0f6e56 0%, #42b08d 50%, #f6ecd6 100%) gives a diagonal blend from deep green to cream.
Frequently asked questions
Does it work in all browsers?
Yes, gradients work in every modern browser.
How do I make a hard edge?
Put two colors at the same position, e.g. red 50% and blue 50%.
Can I use it in Canva or Photoshop?
Yes — download the PNG and use it as a background.