diff --git a/src/plugins/qmlprofiler/qml/HorizontalGradientBorder.qml b/src/plugins/qmlprofiler/qml/HorizontalGradientBorder.qml
new file mode 100644
index 00000000000..16cf2b86e46
--- /dev/null
+++ b/src/plugins/qmlprofiler/qml/HorizontalGradientBorder.qml
@@ -0,0 +1,40 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+
+Rectangle {
+    property color topColor
+    property color bottomColor
+    height: 6
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: bottomColor; }
+        GradientStop { position: 1.0; color: topColor; }
+    }
+}
diff --git a/src/plugins/qmlprofiler/qml/MainView.qml b/src/plugins/qmlprofiler/qml/MainView.qml
index cad370244f6..7bdadc0a29e 100644
--- a/src/plugins/qmlprofiler/qml/MainView.qml
+++ b/src/plugins/qmlprofiler/qml/MainView.qml
@@ -435,22 +435,12 @@ Rectangle {
         }
 
         // Gradient borders
-        Item {
+        VerticalGradientBorder {
             anchors.left: labels.right
             anchors.top: labels.top
             anchors.bottom: labelsTail.bottom
-            width: 6
-            Rectangle {
-                x: parent.width
-                transformOrigin: Item.TopLeft
-                rotation: 90
-                width: parent.height
-                height: parent.width
-                gradient: Gradient {
-                    GradientStop { position: 0.0; color: "#00000000"; }
-                    GradientStop { position: 1.0; color: "#86000000"; }
-                }
-            }
+            leftColor: "#00000000"
+            rightColor: "#86000000"
         }
     }
 
@@ -526,32 +516,19 @@ Rectangle {
         }
     }
 
-    Item {
+    VerticalGradientBorder {
         anchors.right: root.right
-        width: 6
         anchors.top: root.top
         anchors.bottom: root.bottom
-        Rectangle {
-            x: parent.width
-            transformOrigin: Item.TopLeft
-            rotation: 90
-            width: parent.height
-            height: parent.width
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "#86000000"; }
-                GradientStop { position: 1.0; color: "#00000000"; }
-            }
-        }
+        rightColor: "#00000000"
+        leftColor: "#86000000"
     }
 
-    Rectangle {
-        y: root.height - height
-        height: 6
-        width: root.width
-        x: 0
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: "#00000000"; }
-            GradientStop { position: 1.0; color: "#86000000"; }
-        }
+    HorizontalGradientBorder {
+        anchors.bottom: root.bottom
+        anchors.left: root.left
+        anchors.right: root.right
+        bottomColor: "#00000000"
+        topColor: "#86000000"
     }
 }
diff --git a/src/plugins/qmlprofiler/qml/VerticalGradientBorder.qml b/src/plugins/qmlprofiler/qml/VerticalGradientBorder.qml
new file mode 100644
index 00000000000..a143800ccbd
--- /dev/null
+++ b/src/plugins/qmlprofiler/qml/VerticalGradientBorder.qml
@@ -0,0 +1,45 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+
+Item {
+    property color leftColor
+    property color rightColor
+    width: 6
+    HorizontalGradientBorder {
+        anchors.left: parent.right
+        anchors.top: parent.top
+        transformOrigin: Item.TopLeft
+        rotation: 90
+        width: parent.height
+        topColor: rightColor
+        bottomColor: leftColor
+    }
+}
diff --git a/src/plugins/qmlprofiler/qml/qmlprofiler.qrc b/src/plugins/qmlprofiler/qml/qmlprofiler.qrc
index 1e45c140656..f503f72510e 100644
--- a/src/plugins/qmlprofiler/qml/qmlprofiler.qrc
+++ b/src/plugins/qmlprofiler/qml/qmlprofiler.qrc
@@ -16,6 +16,8 @@
         <file>Overview.js</file>
         <file>SelectionRange.qml</file>
         <file>SelectionRangeDetails.qml</file>
+        <file>HorizontalGradientBorder.qml</file>
+        <file>VerticalGradientBorder.qml</file>
         <file>arrow_down.png</file>
         <file>arrow_right.png</file>
         <file>dialog_shadow.png</file>
diff --git a/src/plugins/qmlprofiler/qmlprofiler.pro b/src/plugins/qmlprofiler/qmlprofiler.pro
index aa23d616c8c..8ca0e82f5a6 100644
--- a/src/plugins/qmlprofiler/qmlprofiler.pro
+++ b/src/plugins/qmlprofiler/qmlprofiler.pro
@@ -78,4 +78,6 @@ OTHER_FILES += \
     qml/TimeMarks.qml \
     qml/SelectionRange.qml \
     qml/SelectionRangeDetails.qml \
-    qml/Overview.qml
+    qml/Overview.qml \
+    qml/VerticalGradientBorder.qml \
+    qml/HorizontalGradientBorder.qml
diff --git a/src/plugins/qmlprofiler/qmlprofiler.qbs b/src/plugins/qmlprofiler/qmlprofiler.qbs
index 018019c49a9..e102665d3f9 100644
--- a/src/plugins/qmlprofiler/qmlprofiler.qbs
+++ b/src/plugins/qmlprofiler/qmlprofiler.qbs
@@ -71,6 +71,8 @@ QtcPlugin {
             "SelectionRangeDetails.qml",
             "TimeDisplay.qml",
             "TimeMarks.qml",
+            "HorizontalGradientBorder.qml",
+            "VerticalGradientBorder.qml",
             "qmlprofiler.qrc",
         ]
     }