Stained Glass Gradient
Conic sweep of bold primary and secondary hues.
Open in the gradient generator →
Color Stops
#FF6B6B
#FFD93D
#6BCB77
#4D96FF
#FF6B6B
Stained Glass CSS Code
HEX Copy
background: #FF6B6B; background: conic-gradient(from 0deg, #FF6B6B 0%, #FFD93D 25%, #6BCB77 50%, #4D96FF 75%, #FF6B6B 100%);
RGBA Copy
background: rgba(255, 107, 107, 1.0); background: conic-gradient(from 0deg, rgba(255, 107, 107, 1.0) 0%, rgba(255, 217, 61, 1.0) 25%, rgba(107, 203, 119, 1.0) 50%, rgba(77, 150, 255, 1.0) 75%, rgba(255, 107, 107, 1.0) 100%);
HSLA Copy
background: hsla(0, 100%, 71%, 1.0); background: conic-gradient(from 0deg, hsla(0, 100%, 71%, 1.0) 0%, hsla(48, 100%, 62%, 1.0) 25%, hsla(128, 48%, 61%, 1.0) 50%, hsla(215, 100%, 65%, 1.0) 75%, hsla(0, 100%, 71%, 1.0) 100%);
Similar Gradients
More Gradient Presets
FAQ
What is the Stained Glass gradient?Conic sweep of bold primary and secondary hues.
What's the CSS code for the Stained Glass gradient?
Use
background: conic-gradient(from 0deg, #FF6B6B 0%, #FFD93D 25%, #6BCB77 50%, #4D96FF 75%, #FF6B6B 100%);. RGBA and HSLA versions are also available on this page.