diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
index b96d858ba4b..6af4f47c381 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
@@ -48,6 +48,7 @@ Dialog {
         property int stopsCount;
         property int presetID;
         property int presetType; //default(0) or custom(1)
+        property Item selectedItem;
     }
 
     function addGradient(stopsPositions, stopsColors, stopsCount) {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
index fa59794b149..ded679b624e 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
@@ -64,7 +64,6 @@ Rectangle {
             clip: true
             delegate: gradientDelegate
 
-
             property int gridColumns: width / tabBackground.gridCellWidth;
             cellWidth: width / gridColumns
             cellHeight: 180
@@ -78,6 +77,8 @@ Rectangle {
                     clip: false
 
                     property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
+                    property bool isSelected: false
+
                     width: gradientTable.cellWidth + flexibleWidth - 8; height: tabBackground.delegateHeight
                     radius: 16
 
@@ -93,7 +94,11 @@ Rectangle {
                             gradientData.presetID = presetID;
                             gradientData.presetType = presetTabView.currentIndex
 
-//                            console.log( "#" + preset + " " + presetName + " Stops: " + stopsPosList + " Colors: " + stopsColorList);
+                            if (gradientData.selectedItem != null)
+                                gradientData.selectedItem.isSelected = false
+
+                            backgroundCard.isSelected = true
+                            gradientData.selectedItem = backgroundCard
                         }
                         onEntered: {
                             if (backgroundCard.state != "CLICKED") {
@@ -107,6 +112,13 @@ Rectangle {
                         }
                     } //mouseArea
 
+                    onIsSelectedChanged: {
+                        if (isSelected)
+                            backgroundCard.state = "CLICKED"
+                        else
+                            backgroundCard.state = "USUAL"
+                    }
+
                     states: [
                         State {
                             name: "HOVER"
@@ -119,6 +131,17 @@ Rectangle {
                                 border.color: "#029de0"
                             }
                         },
+                        State {
+                            name: "CLICKED"
+                            PropertyChanges {
+                                target: backgroundCard
+                                color:"#029de0"
+                                z: 4
+                                clip: true
+                                border.width: 1
+                                border.color: "#606060"
+                            }
+                        },
                         State {
                             name: "USUAL"
                             PropertyChanges