Please nominate your Qt Champions for 2021!

Shadow property for Rectangle

  • Hi,

    I would like to contribute to qml project, so I thought about adding 'shadow' property to the rectangle element with controllable properties. So far I saw that currently the only way to add shadow is to place Image element behind rectangle (correct me if I'm wrong). I would like to know if such feature make sense or if someone already did the job?


  • I would love this. Go for it.

  • I'm just wondering how your implementation works. Does it expand the width/height for the shadow and draw rectangle inside this? Does it have an extra variable for shadow width/radius? Or does it just draw the shadow and ignore everything else (if you see it, you see it)?

    Also what method for the gradient/transparency/blur?

    The current method of doing shadows (static image) in QML is:

    import Qt 4.7
    import "content"

    Rectangle {
    id: window

    width: 480; height: 320
    color: "gray"
    ShadowRectangle {
        anchors.centerIn: parent; width: 250; height: 250
        color: "lightsteelblue"
    ShadowRectangle {
        anchors.centerIn: parent; width: 200; height: 200
        color: "steelblue"
    ShadowRectangle {
        anchors.centerIn: parent; width: 150; height: 150
        color: "thistle"


    import Qt 4.7

    Item {
    property alias color : rectangle.color

    BorderImage {
        anchors.fill: rectangle
        anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
        border { left: 10; top: 10; right: 10; bottom: 10 }
        source: "shadow.png"; smooth: true
    Rectangle { id: rectangle; anchors.fill: parent }




  • Sacha: that was quick... Now you can add "angle" and "distance" properties and we can have animation with light effects :)

  • [quote author="kred" date="1291729784"] I thought about adding 'shadow' property to the rectangle element with controllable properties.[/quote]

    well, it would be nice to have all photshop properties for shadow. and for all other layer effects - inner shadow, gradient overlay, bevel aand emboss etc.

  • fcrochik: you can use the rotation property to get 'angle' and the 'distance' property is simply the border left/top/right/bottom.

  • Thanks for replies. Currently I don't have implementation ready, I just wanted to know if there will be interests in it.

    I have on my mind three possible implementations:

    • 'shadow' attribute of rectangle
    • 'shadow' item with content (like flickable element)
    • 'blur' effect on any item - i.e. place colour rectangle with 'blur' modifier behind any other object.
    • other option would be to pack what Sacha wrote into some nice class

  • Well the only concern (I think on the part of QML devs) is performance.
    If you can get the shadows not to use up too much power on low-powered devices, I think it'd be worthwhile having it in there as a C++ class.

    I found my implementation (which is actually from the SDK by the way) doesn't work with rotation.

  • Yes, i tried QML on Nokia 5800 and performance is an issue. On Nokia N8 it works much better.
    I'm just compiling clean qt/declarative, let's see where it will come.

  • I don't see why the QML devs can't move on and allow some extra stuff that only the newer phones are capable of (other than multi-touch). It seems silly to restrict future devices (and desktops) because of lack of hardware in past devices.

    There could be a test to see if it's capable (Symbian^3 or higher?) and then enable shadows, for example.

    I wonder, would shadows benefit from a QGLWidget at all?

  • effects like drop shadow/blur were part of QML earlier on, but now removed due to performance issues .. (somewhere I read that it will be back in a future release)

    chk this "link":

    so the best way forward would be to introduce your own QGraphics<Custom>Effect and take it from there

  • Oh, I just started to implement it in the same way - by providing QGraphicsEffect to QML :/
    Ok, so I think topic can be closed.

  • ok will close the topic, also do chk the Qt3d module, lot of very cool things are being done there ... there is a QML Effect element there .. you can dig further :)

    this topic is now being closed for discussion as requested :)

Log in to reply