Elementor has a native feature to add a gradient background. You can combine two colors (or more with custom CSS) to get a perfect blend of the background. The hardest part of creating a gradient background is finding the color combination. Especially if you want to create a paste gradient. To save you time, we have created 17 pastel gradients using Codioful and provide the results here. You can download them for free for your projects.
Pastel gradients are perfect to enhance your design without being too overpowering thanks to their lighter colors. The implementations are also broader and more flexible than gradients with darker colors — which usually only suitable for a hero section.
How to Use the Pastel Gradients
The native gradient feature of Elementor is limited to two colors. To create a multi-color gradient, you can use a third-party CSS gradient builder such as Codioful and CSS Gradient.
As mentioned earlier, all the pastel gradients below are created with Codioful. Meaning that you need to use Elementor Pro to be able them as the custom CSS feature is only available on Elementor Pro (read: Elementor Free vs Pro).
You can use the following gradients whether on a section, column, or widgets. First, pick a pastel gradient you like and copy the CSS code. Next, edit a section, column, or widget you want to add the gradient to and go to the Advanced tab on the settings panel and open the Custom CSS block. Simply paste the CSS code to the available field.
Free Pastel Gradients for Elementor
Pastel Gradient 1
CSS code:
selector{background-image: linear-gradient(129deg, #e0fce6 0%, #d8fdff 50%, #e7e0ff 100%); }
Pastel Gradient 2
CSS code:
selector{background-image: linear-gradient(203.77deg, #dcd7f7 10%, #edd7dd 60%, #fff7f9 100%); }
Pastel Gradient 3
CSS code:
selector{background-image: conic-gradient(from 195.47deg at 50% 50%, #ffffff 0%, #c6fff6 12%, #eafffc 24%, #c4e7ff 43%, #d1eeff 60%, #aae4ff 76%, #ffffff 100%); }
Pastel Gradient 4
CSS code:
selector{background-image: conic-gradient(from 180deg at 50% 50%, #ebe9cc 0%, #a8e8e9 30%, #f7ece1 56%, #def4f3 80.75%, #ebe9cc 100%); }
Pastel Gradient 5
CSS code:
selector{background-image: repeating-linear-gradient(145.47deg, #bfe4ff 24%, #eaeff2 5%, #ceceff 55.07%, #dfd1f9 77%, #e6e3f5 93%, #eaeff2 100%); }
Pastel Gradient 6
CSS code:
selector{background-image: radial-gradient(circle at 50% 50%, #e2ca9e 0%, #edb4a6 23%, #efcbd4 47%, #edd2ce 64%, #e2dcd3 82%, #efefef 100%); }
Pastel Gradient 7
CSS code:
selector{background-image: conic-gradient(from 272.99deg at 50% 50%, #e7e5ff 1%, #f4e1ef 20%, #f4d4df 30%, #edcfce 45%, #d8fdff 74%, #e7e5ff 100%); }
Pastel Gradient 8
CSS code:
selector{background-image: radial-gradient(ellipse at 50% 50%, #a0b3e5 0%, #e8fbff 100%); }
Pastel Gradient 9
CSS code:
selector{background-image: linear-gradient(69deg, #e5e7eb 0%, #acefe1 30%, #c5e4f9 50%, #b4eee1 70%, #e5e7eb 100%); }
Pastel Gradient 10
CSS code:
selector{background-image: linear-gradient(215.77deg, #c7c1ff 1%, #bbdbf7 65.57%, #efefff 100%); }
Pastel Gradient 11
CSS code:
selector{background-image: linear-gradient(69deg, #ffc6cd 10%, #fecad0 35%, #f6dfe1 60%, #f6e5df 70%, #f6ecdd 80%, #e5e7eb 100%); }
Pastel Gradient 12
CSS code:
selector{background-image: linear-gradient(180deg, #e9efe6 0%, #d2f7e1 21%, #bef4c7 50%, #d8f1df 74%, #d8f1df 100%); }
Pastel Gradient 13
CSS code:
selector{background-image: repeating-radial-gradient(ellipse at 50% 50%, #f4def7 0%, #d9daf4 50%, #c4eaff 100%); }
Pastel Gradient 14
CSS code:
selector{background-image: linear-gradient(112.51deg, #c1d3ff 0%, #dcf5f7 49%, #fcd9e9 100%); }
Pastel Gradient 15
CSS code:
selector{background-image: conic-gradient(from 139deg at 50% 50%, #f5f5f0 0%, #ffd1e1 26%, #f5f5f0 50%, #c0f7ea 74%, #f5f5f0 100%); }
Pastel Gradient 16
CSS code:
selector{background-image: linear-gradient(146.58deg, #f4f9fb 0%, #f1e3d5 21%, #f7c8b6 46%, #f2c898 71%, #eaeff2 100%); }
Pastel Gradient 17
CSS code:
selector{background-image: linear-gradient(191.41deg, #fff6ed 0%, #ffd6d6 37%, #ced9ff 84%); }