Web Design » Figma » How Do You Do Gradient Blur in Figma?

How Do You Do Gradient Blur in Figma?

Last updated on May 4, 2023 @ 9:51 am

Gradient blur is a way to make an image look softer and dreamy. There is a straightforward way to do gradient blur in Figma, and you can adjust its effect on an image.

To create a gradient blur, first, select the layer you want to add a gradient blur. Then, go to the top menu and open the Resources tab.

In the Resources menu, open the Plugins panel and run the Noise and Texture plugin.

NOTE: The Noise and Texture plugin dynamically generates seamless tiled noise, textures, patterns, gradients, and more.

Once the Noise and Texture plugin is already running, go to the Gradients tab.

Here, you will find the Gradients Settings. There are four types of gradients in this plugin: Stripe, Rolling Plane, Spherical, and Mountains. You can choose what kind of gradient you want to use and the color combination reflected on it. You can also adjust the Intensity, Scale, Opacity, and Blend of the gradient you want to apply. Once done, click on the “Add to layer” button.

The color gradient should now be applied to your layer. To add a blur to this gradient, go to the Effects section under the Design tab and click on the “+” icon beside it to add an effect to your gradient layer.

From there, choose “Layer blur” from the list of Effects options and adjust the Blur settings. In the Blur settings, you can choose how much blur you want to add.

And that’s it! Your design should now have that dreamy look with the gradient blur!

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.