#3F51B1
#5A55AE
#7B5FAC
#8F6AAE
#A86AA4
#CC6B8E
#F18271
#F3A469
#F7C978
Linear CSS gradient
#061 Sweet Period Gradient
Sweet Period is a linear CSS gradient built from 9 colors: #3F51B1, #5A55AE, #7B5FAC, #8F6AAE, #A86AA4, #CC6B8E, #F18271, #F3A469, #F7C978. It works well for hero sections, UI surfaces, marketing pages, and subtle background treatments.
Use the palette table below to grab exact HEX and RGB values, then copy the raw CSS snippet and drop it straight into your project without re-building the gradient by hand.
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%);