Egenskapen text-shadow
lägger till skugga till text.
I sin enklaste användning anger du bara den horisontella skuggan (2px) och den vertikala skuggan (2px):
h1
{
text-shadow: 2px 2px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Lägg sedan till en färg (röd) till skuggan:
h1
{
text-shadow: 2px 2px red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Lägg sedan till en oskärpa effekt (5px) till skuggan:
h1
{
text-shadow: 2px 2px 5px red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Text-skugga på en vit text:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Textskugga med rött neonljus:
h1 {
text-shadow: 0 0 3px #ff0000;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow!</h1>
</body>
</html>
Textskugga med rött och blått neonljus:
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow!</h1>
</body>
</html>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
0 5px darkblue;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Tips: Gå till vårt kapitel om CSS-teckensnitt för att lära dig mer om hur du ändrar teckensnitt, textstorlek och stil på en text.
Tips: Gå till vårt kapitel om CSS-texteffekter för att lära dig om olika texteffekter.
Anger den skuggeffekt som läggs till i text