QML: Emboss effect

QML have some components allowing to draw a shadow over an item. The InnerShadow draw a shadow only in one side of the item, but for have the emboss effect we need to habe both sides with light/dark color. The solution is very simple, use two InnerShadow combined.

Full example code can be found here

Use two InnerShadow point to the same item doesn't work cause the second InnerShadow object will override the first one with the result to have the shadow only in one side. The trick is to use as source of the second InnerShadow the first InnerShadow. This will create a perfect emboss effect as in the following code:

Item {
    id: emboss

    property alias source: topLeftShadow.source
    property color lightColor: "white"
    property color darkColor: "black"
    property bool cached: true
    property real radius: 1
    property real spread: 0.1
    property real offset: 1

    InnerShadow {
        id: topLeftShadow
        anchors.fill: parent
        cached: emboss.cached
        horizontalOffset: emboss.offset
        verticalOffset: emboss.offset
        color: emboss.lightColor
        radius: emboss.radius
        samples: emboss.radius * 2
        spread: emboss.spread
    }
    InnerShadow {
        id: bottomRightShadow
        anchors.fill: parent
        cached: emboss.cached
        source: topLeftShadow
        horizontalOffset: -emboss.offset
        verticalOffset: -emboss.offset
        color: emboss.darkColor
        radius: emboss.radius
        samples: emboss.radius * 2
        spread: emboss.spread
    }
}

As you can see is possible to play with various shadow params for show a better bevel effects or change the light/dark color based to the item you have to make embossed. Just try the best combination for your software.