Part 3.4Color, backgrounds, opacity and gradients

This article is all about using colour-based properties in CSS.

Color

An element may have some text that should be a different colour. The following is an example of this:

Colours can be given to elements using quite a few properties and in order to give an element's text colouring, the CSS color property is given a value.

.red-color{
	color: red;
}
	                      			

Colour in CSS works through many different ways. Colors can be represented as text from a list of predefined colours as shown in the previous example. They can also be defined using hexadecimal (base 16 counting). Here is a table with a few predefined colours and the hexadecimal representation of them:

Because computers can generate 2⁶⁴ or 24-bit colours (or 32-bit where the additional 8 bits are for the alpha or transparency channel), 16,777,216 colours can be represented by computers.

These are made of the three primary colours of the magnetic spectrum; red, green and blue. These are often known as RGB.

Below is the magnetic spectrum generated through a CSS gradient (if it is not visibile then it is probably because of an outdated browser).

As RGB is used on computers, there are 255 different individual shades for each colour component, i.e. there are 255 shades of red, 255 shades of blue and 255 shades of green. As well as each of these shades there is an off value, 0. These shades can be mixed to make individual colours and in turn there are 256 x 256 x 256 colours, making 16,777,216 colours.

RGB works in base 10. This means that the first number is 0 and the last is 9. Hexadecimal works in base 16. This means that the first number is 0 and the last number is 15, except, it works with letters instead of numbers after 9.

Here are some very simple conversions between RGB and hexadecimal:

Hexadecimal is a complex system in comparison to writing the name of the colour, but there are plenty of tutorials on the web on it. It is however incredibly useful as it reduces the amount of typing required as the following code sample demonstrates:

.hex_box{
	color: #f0f
}
.rgb_box{
	color: rgb(255,0,255);
}
	                      			

<div class="hex_box">Hex box</div>
<div class="rgb_box">RGB box</div>
	                      			

Here is an example of the HTML with the above CSS as the stylesheet.

Backgrounds

CSS also permits the use of colours on the background property.

A background is defined the same way as text colouring and it can be given any kind of colour value type.

.background_box{
	background: #f00
}

Here is the above example in action:

The background property also permits images to be used instead of colours. Images should be specified from a URL as shown below:

.background_box{
	background: url('http://www.jamiebalfour.scot/myimage.jpg');
}
	                      			

Alpha (transparency) can also be added to colours, but it must be done in a specific way that means that it cannot be done with hexadecimal. Using RGBA, the following kinds of effects can easily be achieved:

Using the opacity property affects the entire element, so the effect shown above where only the border/outer element is slightly transparent cannot be achieved with opacity.

As well as setting the image, the following other properties can be set from the background property:

Alternatively, each of these sub-properties could be combined with the background as properties on their own. As an alternative to the background property, the CSS background-image property can be used. It's usage is exactly the same, the only difference is that it means that multiple backgrounds can be specified. So if the background only stretches 30% of the height of an element, the background colour can take the rest of the place of the background.

Contrast and Accessibility

When choosing colours for text and backgrounds, it’s important to think about readability. A design that looks stylish might still be hard to read if there isn’t enough contrast between the foreground and background.

Accessibility guidelines (such as the WCAG standard) recommend a contrast ratio of at least 4.5:1 for normal text. This ensures that people with visual impairments or colour blindness can still read your content clearly.

Here are some tips:

• Always check light text on dark backgrounds (and vice versa).
• Avoid using colour alone to convey meaning — combine with shapes, icons, or text.
• Test your designs in grayscale to see if the text still stands out.
• Use online tools like Contrast Checker to verify colour choices.

Good contrast doesn’t just help with accessibility — it also improves readability for everyone, especially on mobile screens or in bright sunlight.

Background Images, Layers and Blend Modes

The background-image property lets you place images behind your content, but CSS also allows you to layer multiple backgrounds and even blend them together like in image editing software.

Multiple backgrounds

You can apply more than one background by separating values with commas. The first background is drawn on top, the last one on the bottom.

.my-box {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('tummel.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 20px;
}
    

Blend modes

With background-blend-mode, you can control how multiple backgrounds mix together. Modes like multiply, screen and overlay will be familiar if you’ve used Photoshop or similar tools.

.my-box {
  background-image: url('tummel.jpg'), linear-gradient(to right, #ff6600, #0066ff);
  background-blend-mode: multiply;
  color: white;
  padding: 20px;
}
    

Tips for layering and blending

• Keep readability in mind when layering — gradients can help text stand out.
• Always test across devices: large, detailed background images can slow down page load times.
• Provide a solid colour fallback in case images don’t load or blend modes aren’t supported.

Opacity

As mentioned in the previous section, opacity can be used to define colour transparency. Elements can be given full transparency across themselves and all sub-elements using this property. By applying to all sub-elements as well as the element itself, using the opacity property can lead to unintended transparency in nested content.

.transparency{
  opacity: 0.5;
  background: green;
  padding: 20px;
}

The value of 0.5 specifies that it is 50% opaque. If it was given 0.2, this would be 20% opaque or 80% transparent.

Gradients

Gradients in CSS are a new feature. They are used to make colours stretch from one colour to another gradually. With CSS, multiple colours can be specified and the browser will generate a gradient that passes through each of those colours in the order that is specified.

Gradients can be used instead of a colour in most places including, but not limited to, background, color and border.

Prior to the CSS3 draft specification that includes the specification for linear gradients, websites relied heavily on using images for gradients. These pre-generated images meant that when a user were to zoom, they would notice compression or the gradient simply would not stretch the user's full display. With the CSS gradient properties and support, these problems are now a thing of the past.

The syntax for a CSS gradient is:

background: linear-gradient(direction, colour1, colour2, ..., colourN);
                      			

In this example, there are N colours, as the gradient can accept an infinite number of colour arguments. Also, in this example the gradient is being applied to the background property.

The direction parameter is used to specify which point the gradient is coming from, for instance if it is given top it will come from the top.

Direction can be one of four properties:

The following example shows a gradient that comes from left to right going from red to green to blue:

.linear-grad{
	background: linear-gradient(to right, red, green, blue);
}
                      			

The property list does not give an option for a diagonal gradient (nor radial gradients). To create a diagonal gradient, the direction property can be replaced with the angle property. Instead of giving a direction, an angle can be specified instead.

A gradient that is going to the top right corner will have an angle of 45 degrees. The following sample demonstrates this:

.diag-grad{
	background: linear-gradient(45deg, red, green, orange);
}
                      			

CSS also defines points where a gradient will create a colour stop and start on the next colour. Taking the previous example with red, green and blue, the following gradient puts stops on. Blue here is the most obvious colour because it given 70% of the gradient space:

The code for this is shown below:

.points{
	background: linear-gradient(to right, red, green 30%, blue 70%);
}
                      			

As well as giving the option for what are known as linear gradients, CSS gives the option of radial gradients. An example of one of these gradients is shown below:

Radial gradients can be defined in the same way, except they do not specify a direction or angle parameter.

This example creates a HAL 9000 like spherical object with a border-radius, border and radial gradient:

#hal9000{
	background: radial-gradient(orange, red, #a00, black 50%);
	border-radius: 50%;
	border: 8px #ccc solid;
}

Border gradients

Applying a gradient to an elements border is now considerably easier than it has been in the past thanks to the new border-image property.

.border_gradient{
  border: 3px transparent solid;
  border-image: linear-gradient(45deg, #f60, #f06);
  border-image-slice: 1;
}