(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!
How do you add a shadow inside an element?
A
Change the fourth value of a shadow declaration in the text-shadow property
B
Change the third value of a shadow declaration in the box-shadow property
C
Add the word inset to the shadow declaration in the box-shadow property
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)