This Is How To Add A Blur Effect To Images In C++

What is the Blur Effect in C++? Which C++ IDE helps us easily add blur effects to our apps? How can I use a blur effect from a framework library in C++? Is there an easy way to add blur effects to components? How can I add a blur effect to alpha images in my applications? How can I use the TBlurEffect in C++ Builder? What are the visual tips to add blur in the development of C++ applications? Let’s answer these questions.

C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. One of the greatest features of VCL and FMX UI frameworks is the effects on UI elements. There are many UI effects that can be used on most of the visual elements supported officially by the Embarcadero. There are many good effects that we can use Reflection Effects, Shadow Effects, Glow Effects and others

What is a Blur Effect?

The Blur Effect (TBlurEffect)  is a class to create the blur effects for visible objects like Buttons, Images and Shapes. 

The Canvas parameter specifies the drawing space for the effect and the Visual parameter specifies the TBitmap instance onto which the effect is drawn. The Radius parameter represents the amount of blur and is usually given by the Softness property of the effects that use it. Blur is called by the descendants of ProcessEffect which means you do not need to call this explicitly.

1. Create a new Multi-Device C++ Builder Project, save all project files in a folder
2. Drag your components from the component palette onto the form or into a group component,
3. Drag Blur Effect (TBlurEffect) from Palette to the components or just on to the component that includes them. You can drag it in Structure panel to you component too.
4. You can modify the Softness (0 to 1.0) of the Blur Effect from the Object Inspector if you want. Lower values add less blur effect, which is a more flat surface, higher values have much blur. The maximum is 1.0.
5. That’s all. Press F9 or Run button to run your application.

And the output of a Windows application will be like this, Here we have 2 groups of same components, one has blur effect which are on the main form other is normal. As you see you don’t need to write C++ codes to add blur effects on your UI designs, very easy.

What are Some additional tips on adding blur to C++ Apps at design or run time?

1. Blur effect is an effect like eye disorder. Consider user experience and be careful when you are using it and its softness level!
2. You don’t need to use blur effect if it is not needed, a simple UI is the best! Note that blur effects costs GPU usage due to distortion on all pixels of that UI element.
3. Users wants text to be clear. A very small amount of Blur (Softness < 0.03) might blend larger texts with your background. Your larger texts like headings, titles might look soft if you don’t want a sharper text.
4. Blue effects might be good on Images. You can use blur effects on the alpha Images too. Note that you can use the GIMP application to change the background of the image by using the Color to Alpha menu.
5. Do not use Blur effect on texts if not necessary. If you actually want to obscure or obfuscate text, you can use the blur effect to achieve that.
6. If you have a pop-up form or group of UI elements, all background elements in a group can be blurred as given example above. Thus, it may allow user to focus on the contents of the new window. When it is done you can disable the Blur Effect on the background UI elements.
7. Disabled or unfocused images can be blurred to help visually indicate their state. For example, in some group of images or live video images, only one of them can be normal others can be blurred if you don’t want the user to be able to focus on them.
8. If you have constant background image, the blur effect can be used but note that this may cost more GPU usage. It might be better to permanently blur the image in a paint program instead.
9. If you are using blur effects, remember that the border of your group may have a small number of distortions which means you may need 2-10 pixels more spaces (margins or paddings) between UI elements.
10. The Blur effect can be used with animations in gaming, like awaking in the morning or being drunk or sick etc.
11. Blur effects can be used on some global applications when displaying country based sensitive images due to some regional or cultural sensitivities (brands, drugs, alcohols, clothing restrictions). This can be done by checking the category of the image and the country of the user.

C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.

There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.

Please leave this field empty

Oh hi there 👋
It’s nice to meet you.

Sign up to receive awesome C++ content in your inbox, every day.

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.