Farbverlauf mit CSS 1
2
3
4
5
6
7
8
Metall (23 Beispiele)
GOLD
.metal-gold {
color: rgba(0, 0, 0, 0.72);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff;
box-shadow:
2px 2px 0.5em rgba(122, 98, 0, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.34);
border: 1px solid #deca73;
background:
linear-gradient(
-72deg,
#ffde45,
#ffffff 16%,
#ffde45 21%,
#ffffff 24%,
#452100 27%,
#ffde45 36%,
#ffffff 45%,
#ffffff 60%,
#ffde45 72%,
#ffffff 80%,
#ffde45 84%,
#452100
);
}
SILVER
.metal-silver {
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff;
box-shadow:
2px 2px 0.5em rgba(122, 122, 122, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.34);
border: 1px solid #dedede;
background:
linear-gradient(
-72deg,
#dedede,
#ffffff 16%,
#dedede 21%,
#ffffff 24%,
#454545 27%,
#dedede 36%,
#ffffff 45%,
#ffffff 60%,
#dedede 72%,
#ffffff 80%,
#dedede 84%,
#a1a1a1
);
}
BRONZE
.metal-bronze {
color: rgba(45, 00, 0, 0.55);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #dea173;
box-shadow:
2px 2px 0.5em rgba(122, 55, 34, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #dea173;
background:
linear-gradient(
-72deg,
#ca7345,
#ffdeca 16%,
#ca7345 21%,
#ffdeca 24%,
#a14521 27%,
#ca7345 36%,
#ffdeca 45%,
#ffdeca 60%,
#ca7345 72%,
#ffdeca 80%,
#ca7345 84%,
#732100
);
}
PLATINUM
.metal-platinum {
color: rgba(0, 0, 0, 0.72);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff;
box-shadow:
2px 2px 0.5em rgba(122, 122, 122, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #cacade;
background:
linear-gradient(
-72deg,
#dedeff,
#ffffff 16%,
#dedeff 21%,
#ffffff 24%,
#555564 27%,
#dedeff 36%,
#ffffff 45%,
#ffffff 60%,
#dedeff 72%,
#ffffff 80%,
#dedeff 84%,
#555564
);
}
PINK GOLD
.metal-pinkgold {
color: rgba(56, 13, 0, 0.64);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff;
box-shadow:
2px 2px 0.5em rgba(122, 98, 55, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #caa145;
background:
linear-gradient(
-72deg,
#ffdeca,
#ffffff 16%,
#ffdeca 21%,
#ffffff 24%,
#de7345 27%,
#ffdeca 36%,
#ffffff 45%,
#ffffff 60%,
#ffdeca 72%,
#ffffff 80%,
#ffdeca 84%,
#de7345
);
}
WHITE GOLD
.metal-whitegold {
color: rgba(82, 82, 34, 0.72);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffdeca;
box-shadow:
2px 2px 0.5em rgba(155, 122, 89, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #caa173;
background:
linear-gradient(
-72deg,
#ffdea1,
#ffffff 16%,
#ffdea1 21%,
#ffffff 24%,
#736445 27%,
#ffdea1 36%,
#ffffff 45%,
#ffffff 60%,
#ffdea1 72%,
#ffffff 80%,
#ffdea1 84%,
#736445
);
}
YELLOW GOLD
.metal-yellowgold {
color: rgba(73, 45, 21, 0.72);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff;
box-shadow:
2px 2px 0.5em rgba(155, 122, 89, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #deca45;
background:
linear-gradient(
-72deg,
#ffc373,
#ffffff 16%,
#ffc373 21%,
#ffffff 24%,
#a17434 27%,
#ffc373 36%,
#ffffff 45%,
#ffffff 60%,
#ffc373 72%,
#ffffff 80%,
#ffc373 84%,
#a17434
);
}
PERL
.metal-perl {
color: #e9e9e9;
text-decoration: none;
font-weight: bold;
text-shadow:
1px 1px 0 #ffffff,
-1px -1px 0 #b7b7b7;
box-shadow:
2px 2px 0.5em rgba(98, 73, 122, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.75),
inset -1px -1px 0 rgba(0, 0, 0, 0.34);
border: 1px solid #cacaca;
background:
linear-gradient(
-72deg,
#dedede,
#ffffff 16%,
#dedede 21%,
#ffffff 24%,
#caa1de 27%,
#dea1ca 30%,
#dedede 38%,
#ffffff 45%,
#ffffff 60%,
#dedede 72%,
#ffffff 80%,
#dedede 84%,
#caa1de 93%,
#dea1ca
);
}
CHINA
.metal-china {
color: #dedede;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #a1a1a1;
box-shadow:
2px 2px 0.5em rgba(155, 155, 155, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.21);
border: 1px solid #cacaca;
background:
linear-gradient(
#ffffff,
#e3e3e3
);
}
WOODY
.metal-woody {
color: rgba(73, 21, 0, 0.7);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 #ffffff;
box-shadow:
2px 2px 0.5em rgba(155, 121, 34, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #a16421;
background:
linear-gradient(
#ca7321,
#ffcaa1 15%,
#dea173 20%,
#a16421 15%,
#ca7321 30%,
#ffcaa1 35%,
#ca7321 40%,
#ffcaa1 50%,
#a16421 55%,
#ca7321 60%,
#ffcaa1 65%,
#ca7321 75%,
#dea173 80%,
#ffcaa1 90%,
#dea173 80%,
#ca7321
);
}
CARBON
.metal-carbon {
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
border: 1px solid #565656;
box-shadow:
2px 2px 0.5em rgba(0, 0, 0, 0.55),
inset 1px 1px 0 rgba(255, 255, 255, 0.55),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
background:
-webkit-repeating-linear-gradient(
top, #565656, #131313 2px, #565656 1px
);
background:
repeating-linear-gradient(
top, #565656, #131313 2px, #565656 1px
);
}
Gebürstetes Metall
background-size: 1px 1px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(180deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
background-size: 2px 2px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(180deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
background-size: 3px 3px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(180deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
background-size: 1px 1px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(90deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
background-size: 2px 2px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(90deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
background-size: 3px 3px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(90deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
border-radius: 63px;
background: linear-gradient(315deg, #cacaca, #f0f0f0);
box-shadow: -27px -27px 52px #747474,
27px 27px 52px #ffffff;
border-radius: 27px;
background: linear-gradient(145deg, #ffda00, #ddb800);
box-shadow: 10px 10px 20px #625200,
-10px -10px 20px #ffff00;
border-radius: 48px;
background: linear-gradient(315deg, #88671d, #a27a22);
box-shadow: -27px -27px 38px #48370f,
27px 27px 38px #e6ad31;
border-radius: 50%;
background: #e0e0e0;
box-shadow: inset -27px -27px 52px #747474,
inset 27px 27px 52px #ffffff;
border-radius: 50%;
background: linear-gradient(315deg, #c29595, #e7b2b2);
box-shadow: -29px -29px 57px #564242,
29px 29px 57px #ffffff;
border-radius: 50%;
background: #97b6e7;
box-shadow: inset 8px 8px 14px #3c495c,
inset -8px -8px 14px #f2ffff;
Farbverlauf mit CSS - Seite:
1
2
3
4
5
6
7
8