CSS Conic Gradients
A recent project I’m working on had an image where a series of colours were laid out like sun rays behind some figures. I was curious if I could do these blocks of colour with CSS. I came across conic-gradients and I’ve been experimenting with it to see what I can do with it.
Repeating Conic Gradient (Sun rays)
.rays {
background: -webkit-repeating-conic-gradient(from 270deg at 50% 120%, #FFA500 0deg 10deg, #ff6700 10deg 20deg);
background: -moz-repeating-conic-gradient(from 270deg at 50% 120%, #FFA500 0deg 10deg, #ff6700 10deg 20deg);
background: repeating-conic-gradient(from 270deg at 50% 120%, #FFA500 0deg 10deg, #ff6700 10deg 20deg);
}Note : Firefox does not currently support repeating-conic-gradients 🙁
Setting Sun : Repeating Conic Gradient
background: conic-gradient(from 270deg at 50% 100%,#f3d8e6 0 36deg,#F8DCC4 0 72deg,#CAD9B9 0 108deg, #9FC0CC 0 144deg, #BEC5D9 0 180deg, #ffffff 0 100%);