How to Create Animating Gradients in Framer with No Code

Are you looking to add some cool gradient effects to your website or app, but don’t know how to code? Look no further than Framer and the Particles component from Framer.Supply. In this tutorial, we’ll show you how to create animating gradients in Framer with no code required.

Getting Started

First, head over to framer.supply and use the particles component. Paste the particles component into a Framer project and add some colors. You can tweak the colors to your liking, but we recommend a blue, a darker blue, and a purple.

Setting up the Particles Component

Next, set the amount of particles and the size range. We recommend 15 particles with a size range of 200 to 700 pixels. Enable the trail property and use the spin property to make the particles spin around each other.

To get the effect we want, change the shape of the particles to a triangle. Add some rotation to the triangles so they don’t all stay on the same rotation.

Enhancing the Effect

Now, it’s time to enhance the effect. Add a blur to the parent frame and use the blending mode hard light. This will give your gradient a cool, moving effect.

Previewing the Effect

Preview the moving gradient effect and see how it looks. If you’re happy with it, you’re done! But if you want to create another effect, we’ve got you covered.

Creating Another Effect

Create another effect with a gradient blur. It’s pretty much the same process, but with some different values. Set the particles to be 155 pixels in size, reduce the amount of particles, and make the parent frame a perfect circle with a 50 radius and overflow set to Hidden. Add a blur to the parent frame and use the blending mode hard light.

Conclusion

And that’s it! With some simple tweaks, you can achieve some really cool effects using the same technique. Whether you’re new to Framer or an experienced user, this tutorial is perfect for anyone looking to add some cool gradient effects to their website or app. Follow along with the step-by-step instructions and create your own unique gradients today!