#3F51B1
#5A55AE
#7B5FAC
#8F6AAE
#A86AA4
#CC6B8E
#F18271
#F3A469
#F7C978
Linear CSS gradient
#061 Sweet Period Gradient
A smooth linear CSS gradient flowing upward from bottom to top, Sweet Period blends sky blue (#3F51B1), cornflower blue (#5A55AE), periwinkle (#7B5FAC), violet (#8F6AAE), purple (#A86AA4), hot pink (#CC6B8E), red (#F18271), vermillion (#F3A469), and orange (#F7C978) in 9 colour stops.
The blue-leaning balance conveys dependability — a palette that earns trust before the headline is even read.
Works well for SaaS marketing pages, corporate intranets, productivity tools. Copy the CSS snippet below and apply it directly — no preprocessor or build step required.
Color palette
ColorHEXRGB
#3F51B1rgb(63, 81, 177)
#5A55AErgb(90, 85, 174)
#7B5FACrgb(123, 95, 172)
#8F6AAErgb(143, 106, 174)
#A86AA4rgb(168, 106, 164)
#CC6B8Ergb(204, 107, 142)
#F18271rgb(241, 130, 113)
#F3A469rgb(243, 164, 105)
#F7C978rgb(247, 201, 120)
CSS code
background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);