close
You can continue to use these color palettes. Make them your own and exchange individual colors as you wish. Rate these color palettes and share them.
Find examples of linear and radial color transitions with two colors from this color palette.
The first three colors are preselected - if available. You can add or deselect them with the color icon at the bottom right of each color.
Easy for Web Design: Copy the CSS code for easy integration on your website.
Find examples of linear and radial color transitions with three colors from this color palette.
The first three colors are preselected - if available. You can add or deselect them with the color icon at the bottom right of each color.
Easy for Web Design: Copy the CSS code for easy integration on your website.
Link:
Share-Link:
Lineal
CSS-Code:
background-image: linear-gradient(135deg, #000000 -6%, #FF0000 105%);
Radial
CSS-Code:
background-image: radial-gradient(circle, #000000 6%, #FF0000 194%);
CSS-Code:
background-image: linear-gradient(135deg, #000000 -1%, #B8DAE5 93%);
CSS-Code:
background-image: radial-gradient(circle, #000000 -5%, #B8DAE5 207%);
CSS-Code:
background-image: linear-gradient(135deg, #FF0000 -9%, #000000 103%);
CSS-Code:
background-image: radial-gradient(circle, #FF0000 10%, #000000 204%);
CSS-Code:
background-image: linear-gradient(135deg, #FF0000 -4%, #B8DAE5 92%);
CSS-Code:
background-image: radial-gradient(circle, #FF0000 4%, #B8DAE5 193%);
CSS-Code:
background-image: linear-gradient(135deg, #B8DAE5 10%, #000000 101%);
CSS-Code:
background-image: radial-gradient(circle, #B8DAE5 11%, #000000 202%);
CSS-Code:
background-image: linear-gradient(135deg, #B8DAE5 -1%, #FF0000 103%);
CSS-Code:
background-image: radial-gradient(circle, #B8DAE5 3%, #FF0000 204%);
Lineal
HEX #000000 over HEX #FF0000 to HEX #B8DAE5
CSS-Code:
background-image: linear-gradient(135deg, #000000 -6%, #FF0000 54%, #B8DAE5 103%);
Radial
HEX #000000 over HEX #FF0000 to HEX #B8DAE5
CSS-Code:
background-image: radial-gradient(circle, #000000 9%, #FF0000 57%, #B8DAE5 103%);
HEX #000000 over HEX #B8DAE5 to HEX #FF0000
CSS-Code:
background-image: linear-gradient(135deg, #000000 -4%, #B8DAE5 44%, #FF0000 103%);
HEX #000000 over HEX #B8DAE5 to HEX #FF0000
CSS-Code:
background-image: radial-gradient(circle, #000000 11%, #B8DAE5 56%, #FF0000 93%);
HEX #FF0000 over HEX #000000 to HEX #B8DAE5
CSS-Code:
background-image: linear-gradient(135deg, #FF0000 8%, #000000 55%, #B8DAE5 98%);
HEX #FF0000 over HEX #000000 to HEX #B8DAE5
CSS-Code:
background-image: radial-gradient(circle, #FF0000 9%, #000000 48%, #B8DAE5 98%);
HEX #FF0000 over HEX #B8DAE5 to HEX #000000
CSS-Code:
background-image: linear-gradient(135deg, #FF0000 14%, #B8DAE5 50%, #000000 103%);
HEX #FF0000 over HEX #B8DAE5 to HEX #000000
CSS-Code:
background-image: radial-gradient(circle, #FF0000 5%, #B8DAE5 58%, #000000 98%);
HEX #B8DAE5 over HEX #000000 to HEX #FF0000
CSS-Code:
background-image: linear-gradient(135deg, #B8DAE5 11%, #000000 46%, #FF0000 101%);
HEX #B8DAE5 over HEX #000000 to HEX #FF0000
CSS-Code:
background-image: radial-gradient(circle, #B8DAE5 -2%, #000000 55%, #FF0000 97%);
HEX #B8DAE5 over HEX #FF0000 to HEX #000000
CSS-Code:
background-image: linear-gradient(135deg, #B8DAE5 -9%, #FF0000 47%, #000000 107%);
HEX #B8DAE5 over HEX #FF0000 to HEX #000000
CSS-Code:
background-image: radial-gradient(circle, #B8DAE5 14%, #FF0000 46%, #000000 94%);