0

I do not know how to blur the background of my window (something like backdrop-filter: blur in CSS).

Apparently I have to use something called ShaderEffect but I do not know how to write a shader.

I found the following code for Gaussian blur which I think is appropriate but how do I put it in my project?

https://www.shadertoy.com/view/Xltfzj

I want something like this picture:

Blurred Window

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
  • See https://doc.qt.io/qt-5/qml-qtgraphicaleffects-fastblur.html or https://doc.qt.io/qt-5.15/qml-qtgraphicaleffects-gaussianblur.html – eyllanesc Oct 19 '21 at 03:09
  • @eyllanesc My project is based on Qt 6. do these effects exist in Qt 6? I think they are deprecated. –  Oct 19 '21 at 03:14
  • See https://doc.qt.io/qt-6/qml-qt5compat-graphicaleffects-fastblur.html – eyllanesc Oct 19 '21 at 03:17
  • @eyllanesc Thanks, I think most of the work is done but it needs an image to blur. How do I blur the screen "behind" the window? –  Oct 19 '21 at 03:47

2 Answers2

0

It's actually not an easy thing to accomplish because you don't want your blur object to be a child of the item that will be blurred. Otherwise it will be trying to blur itself. Here's something to give you the general idea.

Item {
    id: window

    Image {
         id: background
         anchors.fill: parent
         source: "someImg.jpg"
    }

    // This can't be a child of `background`
    Item {
        id: clipRect
        anchors.centerIn: parent
        width: 300
        height: 300
        clip: true

        // We want the blur object to fill the background 
        // but be clipped to its parent
        FastBlur {
            x: -parent.x
            y: -parent.y
            width: background.width
            height: background.height
            source: background
            radius: 64
        }

        // Just to put a border around the blur
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "orange"
            border.width: 2
        }
    }
}
JarMan
  • 7,589
  • 1
  • 10
  • 25
-2

If you want to blur a picture in CSS, you need to go to the image's or class's style and do filter: blur(radius);

The radius is how big you want the blur to be. You have to remember to put 'px' after the radius, eg filter: blur(8px);

You can also put it in as rem instead of px. A quick note on the link that you provided: It is not in the language CSS. You don't necessarily need a shader effect for it to work.

If you do want to use the shader, then wait for someone else's reply :)

Dharman
  • 30,962
  • 25
  • 85
  • 135
Skyfall
  • 5
  • 4