(click anywhere to close)
OPEN MENU

[CSS3] Shadows

category: Website | course: CSS3 | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Multiple Shadows

Shadows can be used to make something stand out, create contrast, or simulate depth. You can set a shadow for text with text-shadow, and a whole element/box with box-shadow.

CSS3Shadows

A shadow is, basically, a copy of the element that is positioned behind it and blurred (“faded out”) a little. That’s why there’s a lot of arguments you can supply, of which only the first three are mandatory.

Argument

Description

x-offset

The horizontal position of the shadow. Can be any number.

y-offset

The vertical position of the shadow. Can be any number.

blur

The blur of the shadow.

colour

The colour of the shadow. Default is black

spread

The size of the shadow. Can be any value, which it adds to the default width and height.

inset

If you add the word inset before any of the arguments, the shadow is added at the inside.

The last two only work for box-shadow.

p .highlight {
	text-shadow: 0 0 5px red;
}
div.highlight {
	box-shadow: 0 0 5px blue 0;
}

Multiple Shadows

You can add multiple shadows to the same element using a comma separated list.

h1.fancy {
	text-shadow: 0 0 5px red, -5px -5px 2px blue, 5px 5px 2px violet;
}
CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
What happens when you seperate shadow declarations with commas?
A
You set the colour of a text shadow
B
You set multiple shadows on an element
C
You add a shadow inside an element
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)