Use Shaders and Graphical Effects in Your App

Add Blur Effect to Navigation

Qt already provides several different QML types to create graphical effects like blur, drop shadow, opacity masks and more. See here for an overview of all effects: Graphical Effects

The following example creates a list page that uses a custom navigation bar background with an image. When the list is scrolled, the background image is blurred using the FastBlur effect:

iOS Android

 import Felgo 3.0
 import QtQuick 2.5
 import QtGraphicalEffects 1.0

 App {
   NavigationStack {

     ListPage {
       id: page
       title: "Blur Effect"

       // get the total height of status bar and navigation bar
       readonly property real barHeight: dp(Theme.navigationBar.height) + Theme.statusBarHeight

       // navigation bar is 100 percent translucent, the page then also fills the whole screen
       // this allows us to display a custom navigation bar background for this page
       navigationBarTranslucency: 1.0

       // list view only fills page area below navigation bar
       listView.anchors.topMargin: barHeight

       // add twenty dummy items to the list
       model: 20
       delegate: SimpleRow { text: "Item #"+index }

       // custom navigation bar background that shows an image
       Rectangle {
         id: background
         width: parent.width
         height: page.barHeight
         color: Theme.navigationBar.backgroundColor

         // add the image
         Image {
           id: bgImage
           source: ""
           anchors.fill: parent
           fillMode: Image.PreserveAspectCrop

           // the blur effect displays the image, we set the source image invisible
           visible: false

         // apply blur effect
         FastBlur {
           id: blur
           source: bgImage
           anchors.fill: bgImage

           // the strength of the blur is based on the list view scroll position
           radius: Math.max(0, Math.min(64, page.listView.contentY/3))
       } // Rectangle
     }// ListPage


Add a Custom Shader

You can also define custom shaders using the ShaderEffect component.

Add Particles

To add particles, you can use the particle components: Qt Quick Particles QML Types

This guide is very helpful for using particles:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support