Tilda Blog

How to Add Gradients to Your Designs on Tilda

🎉 You can now add gradients to your websites without leaving Tilda's Zero Block editor.

Gradients in web design look fresh and dynamic, catch the user’s eye, add color depth, and create the illusion of 3D space. Let's have a closer look at the gradients available in Zero Block👇

✨ Linear Gradient
In a linear gradient, the transition between colors occurs in a straight line. You can use multiple colors, change the distance between them within a gradient, and set any angle for the color combination.

To add a linear gradient to an element, go to Zero Block Settings → Background Color → Linear. To add another color, hover over the color bar and click it when you see the "+" sign. To remove a color, click it and drag it down. You can set the gradient angle under the color palette—enter a number of degrees or rotate the widget with your mouse.

✨ Radial Gradient
The transition between colors in radial gradient is circular. Color in the center transitions to the color on the edge. You can set any number of colors and adjust the distance between them inside the gradient in the Settings.

To add a radial gradient to an element, go to Zero Block Settings → Background Color → Radial.

📌 Both gradients can be applied to backgrounds, texts, shapes, and tooltips.

More about gradients in Zero Block 👉 https://blog-en.tilda.cc/gradients-in-zero-block
Made on