Everything You Need to Know about CSS3 Color Techniques


CSS3 is revolutionizing Web by introducing a number of totally amazing elements and attributes that push modern web development a little bit forward. Many features are already supported to some extent in latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera.

In this article we will talk about CSS3 colour techniques such as RGB / RGBA and HSL / HSLA color models, opacity, linear and radial gradients, box and text shadows as well as show you some examples of excellent implementation of the CSS3 colour techniques in practice. You will get some hints as to the new markup, understand how to incorporate new CSS3 elements, embrace the new creative freedoms of CSS3 and start using powerful and absolutely awesome CSS3 colour techniques today!

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

Colors in CSS3

Resources: SlideShare Presentation: Colors in CSS3 by Lea Verou

W3C CSS3 Color Specification

W3C CSS3 Color Specification (working draft, 21 July 2008) describes color values and properties for foreground color and group opacity in CSS3 color module.

W3C CSS3 Color Specification

W3C: CSS3 Color Modul

CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

CSS3 Color Names

CodeNique: CSS3 Color Names

Color Models, Opacity


The RGB declaration sets color/colour using Red (R), Green (G) and Blue (B) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.


div.L1 { background:rgb(60, 80, 100); height:20px; }
div.L2 { background:rgb(60, 100, 100); height:20px; }
div.L3 { background:rgb(60, 120, 100); height:20px; }
<br />
div.L4 { background:rgb(25, 50, 100); height:20px; }
div.L5 { background:rgb(25, 50, 150); height:20px; }
div.L6 { background:rgb(25, 50, 200); height:20px; }


div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }


The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 – blue.
Saturation is a percentage: 0% – grayscale, 100% – full color.
Lightness is a percentage: 0% – dark, 50% – the average, 100% – light.


div.L1 { background:hsl(320, 100%, 25%); height:20px; }
div.L2 { background:hsl(320, 100%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }
<br />
div.L4 { background:hsl(202, 100%, 50%); height:20px; }
div.L5 { background:hsl(202, 50%, 50%); height:20px; }
div.L6 { background:hsl(202, 25%, 50%); height:20px; }


div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }


CSS3 opacity allows us to control how see-through an element is. The opacity declaration sets the value to how opaque an elements (layer, text, image, etc.) is. An element with opacity value 1.0 is fully opaque (visible) while an element with opacity value 0.0 is completely invisible. Any value in-between determine how opaque the element is.


div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }


There are a whole variety of gradient options available with CSS3. Linear and radial gradients are becoming irreplaceable! They go a long way towards simplifying layouts and allow us to create visually appealing design with saving a huge amount of time and efforts.

To create CSS3 gradient, use background:-moz-linear-gradient(pos, #AAA B, #XXX Y);
pos = the position of the first color, giving direction to the gradient
#AAA = primary color
B = where the fade begins (%)
#XXX = secondary color
Y = where the fade begins (%)

Linear Gradient

Linear Gradient

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
                     from(#35425d), to(#fff));

Linear Gradient

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
                  from(#35425d), to(#fff));

Radial Gradient

Radial Gradient

.my_CSS3_class {
  height: 250px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, 
                  from(#487a77), to(#fff));


Box Shadow

Shadows can be applied in CSS3 to borders, images, and text as well.

To create CSS3 box shadow, use box-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

Box Shadow

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;

Text Shadow

Similar to the box shadow effect, CSS3 shadow technique can be applied to text.

To create CSS3 text shadow, use text-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

Text Shadow

.my_CSS3_class {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;

Excellent implementations of CSS3 Color Techniques

CSS3 Gradient Buttons

Gradient buttons created with just CSS (no image or Javascript) are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

CSS3 Gradient Buttons

“CSS3 Gradient Buttons” Tutorial + Demo

Super Awesome Buttons with CSS3 and RGBA

A tutorial for creating really cool buttons using the RGBA feature of CSS3.

Super Awesome Buttons with CSS3 and RGBA

“Super Awesome Buttons with CSS3 and RGBA” Tutorial + Demo

Browser Support

Detailed information about CSS3 color support in most of the modern web browsers (Chrome, Firefox, Opera, Safari).

Web Designer’s Browser Support Checklist

Web Designer's Browser Support Checklist

FinMeByIP: Web Designer’s Browser Support Checklist

Web Browser CSS3 Support

Web Browser CSS3 Support

Web Devout: Web Browser CSS3 Support


There are 17 comments for this article
  1. MyFreeWeb at 8:17 pm

    AFAIK, opacity is CSS2, not CSS3.
    And IE in Browser Support Checklist really makes me laugh :D

  2. Pingback: [User Link:Everything You Need to Know about CSS3 Color Techniques] | Tips for Designers and Developers | tripwire magazine
  3. Jay Kaushal at 3:45 am

    Thanks Aygul. A wonderful collection of various resources about CSS3. I am also learning these trick alongwith html5 so it is a one place that gives you all info under a single article. Keep it up :)

  4. justin at 9:52 am

    Nice work, am forwarding this straight to the web designer that only works in photoshop to start learning

  5. Websitesdevel at 11:01 am

    Good article. I hope that browsers will support this standart soon! It will be much easier create websites designs with CSS3 – no need for gradient background images, …

  6. W3Mag at 9:35 am

    is amazing how much has CSS changed over the time!

  7. Giacomo at 10:45 pm

    useful, but….I hope that also IE brwser family soon accept all CSS3 standard! Thank’s for the article!

  8. Pingback: 125+ Fresh Useful Articles for Web Designers « Mingyu
  9. Pingback: 9 CSS3 Tools + 20 hilfreiche CSS3 Ressourcen | hpvorlagen24 Webdesign Magazin
  10. Adie at 12:31 pm

    Nice post. Especially the ‘Web Designer’s Browser Support Checklist’ – most useful. It’s funny how the most popular browser is the one thats lagging behind with css3 though.

  11. Pingback: links for 2010-07-02 « Mandarine
  12. Pingback: CSS3 Tutorials and Resources - WebsitesMadeRight.com
  13. Jasa Pembuatan Web at 7:24 am

    Nice Article CSS3… thanks…