Back

Noisy Blur

Use this component to add a blurry, noisy overlay to an image. Users can adjust how strong the blur is, how much noise is added, and how visible the noise is. The effect is created by blurring the background layer and then adding a layer of random dots on top. This can be used to create interesting visual effects or to partially obscure an image while giving it texture.

Status

Working

Code Component

Yes

This component is a part of the 280+ components, layouts and code overrides from the SegmentUI KIt. Learn More. We also have a library of freebies here

0:00 / 0:00

Instructions

  1. Copy & paste the component onto your canvas.

  2. Ensure that the component is above your target elements

  3. In the properties panel, adjust the controls:

    • Noise Amount: Increase this value to make the noise pattern more pronounced and grainier. Lower values create subtle texture, while higher values produce a more intense, static-like effect.

    • Noise Opacity: This determines how visible the noise overlay is. A lower opacity makes the noise more transparent and subtle, while a higher opacity makes it more prominent and can significantly alter the underlying image.

    • Blur Amount: Set this to control the strength of the blur effect.


How it Works

The component uses three main property controls to blur anything behind it:

  • Noise Amount: Adjusts the intensity of the noise (0-255)

  • Noise Opacity: Controls the transparency of the noise overlay (0-1)

  • Blur Amount: Sets the strength of the blur effect (0-50 pixels)

Frequently Asked Questions

I'm having issues with this component. What should I do?

I'm having issues with this component. What should I do?

I'm having issues with this component. What should I do?

How can i make this responsive?

How can i make this responsive?

How can i make this responsive?

0:00 / 0:00

What is SegmentUI Pro?

SegmentUI Pro is a UI kit and component library containing 500+ assets, components, power ups, upgrades, code overrides, layouts, design systems, Premium templates and a custom Framer code generator. You can preview the UI Kit here.

Additionally, we have a Figma Design system to compliment the Framer components.

Our mission is simple - give superpowers to designers. Everything from the first pixel, education to code components. It's an ever growing, ever evolving set of tools for designer without the hefty price tag.

vs

Who is SegmentUI Pro For?

SegmentUI Pro is for Framer designers and template creators who want to power up their designs

After creating multiple templates and client projects myself, I realised one thing - In order to make more revenue, you need to give more value. This was the main intent behind SegmentUI. To empower designers and to be able to allow them to deliver more value for the time they spend

SegmentUI Pro is for Framer designers and template creators who want to power up their designs

After creating multiple templates and client projects myself, I realised one thing - - In order to make more revenue, you need to give more value. This was the main intent behind SegmentUI. To power up designers to and to be able to allow them to deliver more value for the time they spend

SegmentUI Pro is for Framer designers and template creators who want to power up their designs

After creating multiple templates and client projects myself, I realised one thing - - In order to make more revenue, you need to give more value. This was the main intent behind SegmentUI. To power up designers to and to be able to allow them to deliver more value for the time they spend

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!