Gridbox is shutting down. We're sorry 😔. Learn more
Make your website or blog colorful and rich by background gradients. Just copy the generated CSS code and use it in your CSS
Nicely curated collection of beautiful gradients
Gradient is an important color feature addition in CSS3. Rather than using single color, now we can add multiple color combinations in one declaration block without relying on images, which could decrease the HTTP request in your website allowing the website load faster. If you have played around with gradients in CSS3 you are probably familiar with the two methods: radial and linear gradient
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. It goes down/up/left/right/diagonally. In simple terms it is a straight progression.
background: linear-gradient(#e66465, #9198e5);
The radial-gradient() CSS function creates repeating gradients that radiate from an origin. It is defined by their center or origin. In simple terms, it is a circular progression.
background: radial-gradient( circle 972.6px at 10% 20%, rgba(243,0,75,1) 0%, rgba(255,93,75,1) 90% );
The conic-gradient() CSS function consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). It is rotated around a center point. With conic gradients, the colors transition will be around the center of a circle, starting at top and going clockwise.
background: conic-gradient(red, orange, yellow, green, blue);