Semi-transparent blurred window

  • Hello,
    I am looking for a way I could create a semi-transparent blurred background for a window, kind of like:

    Image: Acrylic Material (Fluent Design)

    I have already tried several times using FastBlur (but it requires a source, so it doesn't work) and DropShadow (but it only darken what is behind).

    Thanks, Arthur AUTIN.

  • I've also tried (unsuccessfully) to find a way to do this.

    It's part of the look and feel of most modern OS's, both desktop and mobile, so it would be nice to find a way to do this in Qt

  • Do you mean you want to simulate this effect on systems where the OS' desktop compositing system doesn't already provide it, or do you mean you want to get it to work from Qt on systems which do provide it?

  • Hi, I would like to do this on a system that doesn't provide it (qtwayland for example).

  • Seems tricky. To do it in an application's own logic, it effectively needs to be able to get hold of a screenshot of all the desktop and all the windows under the application, but without including the application window and any other windows in front of the application. The desktop compositor is the only thing which could reasonably be expected to have access to all that. So surely the only real solution would be to run a window manager/desktop compositor which does apply such fancy effects? (For example, I think the Wayland-enabled Enlightenment can do such things: demo video here; I assume it'd work with unmodified Qt applications too).

    (But if you just wanted this sort of effect to be done within some Qt application and don't care about other windows, then this might be of interest.)

  • I hade some time, and come up with something.

    In the end you'll need a some kind of noisemap. I would do that outside the application. But for this example I created a crude one in QML:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    Window {
        id: rootItem
        visible: true
        width: 640
        height: 480
        title: qsTr("MilkyWindow")
        flags: Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
        color: "#00000000"
        function getRandomInt(min, max) {
          return Math.floor(Math.random() * (max - min + 1) + min);
        readonly property int pixelWidth: 2
        readonly property int pixelHeight: 2
        //Value between 0 and 255
        readonly property int minOpacity: 170
        readonly property int maxOpacity: 180
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "black"
            border.width: 2
                id: canvas
                anchors.fill: parent
                anchors.margins: 2
                property bool paintedOnce: false
                onPaint: {
                        var ctx = canvas.getContext("2d")
                        var opac
                        for( var x = 0; x < rootItem.width; x+=pixelWidth){
                            for( var y = 0; y < rootItem.height; y+=pixelHeight){
                                opac = getRandomInt(rootItem.minOpacity, rootItem.maxOpacity)
                                context.fillStyle = "#" + opac.toString(16) +"FFFFFF"
                    paintedOnce = true
            anchors.centerIn: parent
            text: "Test Text!?!?!?! #####"

    this results in this image for me:


  • Yes the transparency/translucency is easy enough (using Qt.WA_TranslucentBackground).... the real challenge is to be able to apply a blur effect to the exposed underlying background though. And it seems the Qt application just doesn't have access to the pixels on the desktop behind the app.

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.