Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 01:49, 24 July 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Glossy Qt stylesheet

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Created: gnuton (23 Dec 2010)
Last edited: hamishwillee (24 Jul 2012)


This article shows how to use CSS to customize Qt application with a glossy style. Thanks to the power offered by Qt style sheets it is possible to change the look of standard Qt widgets in an easy way without dealing with C++ code.



The following CSS is applied to a QFrame called "GlossyFrame" and to the "title" QLabel and QPushbuttons which are children of the frame. Qt style sheets don't offer the possibility to change the checkbox style with complex shapes. Using pixmap to skin checkboxes is almost mandatory if you want to make them look better. In this example the checkbox indicator pixmaps have been embedded into the Qt resource file.

QFrame#GlossyFrame {
border: 1px solid white;
border-radius: 3px;
background: qradialgradient(
cx: 0.5, cy: -1.8,
fx: 0.5, fy: 0,
radius: 2,
stop: 0 #9aa9be,
stop: 1 #293859);
font: bold;
#GlossyFrame QLabel#Title {
background: transparent;
color: white;
#GlossyFrame QPushButton {
color: #white;
border: 1px solid black;
border-radius: 3px;
padding: 1px;
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #bec1d2,
stop: 0.4 #717990,
stop: 0.5 #5c637d
stop:1 #68778e
min-height: 36px;
#GlossyFrame QPushButton:pressed {
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #68778e,
stop: 0.4 #5c637d
stop: 0.5 #717990,
stop:1 #bec1d2
color: black;
#GlossyFrame QLineEdit {
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 gray,
stop: 0.2 white
stop:1 white
border-radius: 1px;
border: 1px solid black;
min-height: 24px;
color: black;
#GlossyFrame QCheckBox {
color: white;
#GlossyFrame QCheckBox::indicator {
position: absolute;
height: 27px;
width: 64px;
#GlossyFrame QCheckBox::indicator:checked {
image: url(:/checkbox_on.png);
#GlossyFrame QCheckBox::indicator:unchecked {
image: url(:/checkbox_off.png);

The full code is available

This page was last modified on 24 July 2012, at 01:49.
333 page views in the last 30 days.