Ray Sweep Gradient — CSS, Hex Stops and Preview
Ray Sweep is a conic-gradient built from 5 fixed stops, from #FF6B6B to #FF6B6B. The values below are the preset exactly as the generator ships it, so you can paste the block and get this look without opening the tool.
Copy the CSS
.gradient {
background: #FF6B6B; /* fallback for old browsers */
background: conic-gradient(from 0deg at 50% 50%, #FF6B6B 0%, #4ECDC4 25%, #FFE66D 50%, #4ECDC4 75%, #FF6B6B 100%);
}Stops
| # | Colour | Position | RGB |
|---|---|---|---|
| 1 | #FF6B6B | 0% | rgb(255, 107, 107) |
| 2 | #4ECDC4 | 25% | rgb(78, 205, 196) |
| 3 | #FFE66D | 50% | rgb(255, 230, 109) |
| 4 | #4ECDC4 | 75% | rgb(78, 205, 196) |
| 5 | #FF6B6B | 100% | rgb(255, 107, 107) |
Frequently asked
What is the CSS for the Ray Sweep gradient?background: conic-gradient(from 0deg at 50% 50%, #FF6B6B 0%, #4ECDC4 25%, #FFE66D 50%, #4ECDC4 75%, #FF6B6B 100%); It is a conic-gradient with 5 colour stops, and a solid fallback of #FF6B6B for anything that cannot paint gradients.
Where does the Ray Sweep preset come from?
It ships with the CSS Shift generator as one of ten starting points. The values are fixed, not random: a conic sweep starting at 0° centred at 50% / 50%, with stops at 0%, 25%, 50%, 75%, 100%.
How do I put text on top of it?
Treat the lightest and darkest stop as the worst case. Against white, #FF6B6B scores 2.78:1; #4ECDC4 scores 1.93:1; #FFE66D scores 1.25:1; #4ECDC4 scores 1.93:1; #FF6B6B scores 2.78:1 — so a white heading only clears 4.5:1 where those numbers are at least 4.5.