Effect.DropShadow

Adds a drop shadow under an item.

The shape of the drop shadow is determined by the bounding box of the item, not its contents. In the case of a Rectangle element, the rectagle's corner radius is also considered.

Rectangle {
    width: 60
    height: 60
    radius: 4

    with Effect.DropShadow {
        y: 2
        color: #gray
        blurRadius: 4
    }
}

Multiple Shadows

Multiple drop shadows with different properties can be applied to the same item to increase the depth and definition of the shadow effect.

Rectangle {
    width: 300
    height: 60
    radius: 4
    
    with Effect.DropShadow {
        y: 1
        color: #gray
        blurRadius: y * 2
    }
    
    with Effect.DropShadow {
        y: 4
        color: #gray
        blurRadius: y * 2
        spreadRadius: -2
    }
    
    with Effect.DropShadow {
        y: 12
        color: #gray
        blurRadius: y * 2
        spreadRadius: -4
        opacity: 0.3
    }
    
}

property Bool enabled: true

The shadow does not appear when disabled.

property Float x: 0

property Float y: 0

The offset of the shadow. By default the shadow is positioned at (0, 0), directly under the item.

Adjusting the offset simulates moving the light source that casts the shadow.

property Float blurRadius: 5

Larger values for blur radius give a more diffuse lighting appearance. Smaller values give a more direct lighting with sharper shadows.

property Float spreadRadius: 0

The spread radius to use for the shadow.

A spread has the effect of increasing or decreasing the size of shadow by the radius in every direction.

A negative spread radius can be used to maintain sharp side edges on items with shadows.

property Color color: #black

property Float opacity: 0.5

The shadow's color and opacity. By default the shadow is black, at 0.5 opacity.