Gradient with Clip-Path

Combine gradients with clip-path shapes. Create colorful, shaped gradients.

Key Concepts

• Gradients + clip-path
• Radial gradients
• Linear gradients

Technical Details

clip-path: circle(50% at 50% 50%);
background: radial-gradient(circle, purple 0%, pink 50%, transparent 100%);
/* Clip-path works with any background */
/* Combine gradients with shapes