Ai augmented CSS3
Patterns & Backgrounds
In the realm where colors sway,
Art and code entwine to play.
Symmetry whispers, hues align,
A canvas shaped by human design.
Philosophy’s hand draws the line,
A harmony crafted, near divine.
Each pixel placed with tender care,
Technology breathes the art laid bare.
CSS3 Pattern Gallery
/* XiloliX 🤖 magic-gradient */
.magic-gradient {
background:
conic-gradient(from 90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee, #ff9a9e 300%),
repeating-radial-gradient(circle, transparent 0, transparent 20px, rgba(255, 255, 255, 0.1) 20px, rgba(255, 255, 255, 0.1) 40px),
radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.5), transparent 60%);
background-blend-mode: overlay, screen, multiply;
background-size: 200% 200%, 150px 150px, 50%;
animation: magic-flow 8s infinite linear;
}
/* XiloliX 🤖 geometric-overlay */
.geometric-overlay {
background-color: #556;
background-image:
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 70%);
background-size: 80px 140px, 80px 140px, 80px 140px, 80px 140px, 80px 140px, 80px 140px, 200% 200%;
background-position:
0 0,
0 0,
40px 70px,
40px 70px,
0 0,
40px 70px,
50% 50%;
background-blend-mode: overlay, multiply, multiply, multiply, screen, overlay, soft-light;
}
/* conic-gradient-pattern */
:root {
--s: 125px; /* control the size */
--c1: #f8ca00;
--c2: #bd1550;
}
.conic-gradient-pattern {
--_g: var(--c1) 90deg, var(--c2) 0 135deg, #0000 0;
background:
conic-gradient(from -45deg at calc(100% / 3) calc(100% / 3), var(--c1) 90deg, #0000 0),
conic-gradient(from -135deg at calc(100% / 3) calc(2 * 100% / 3), var(--_g)),
conic-gradient(from 135deg at calc(2 * 100% / 3) calc(2 * 100% / 3), var(--_g)),
conic-gradient(from 45deg at calc(2 * 100% / 3) calc(100% / 3), var(--_g), var(--c1) 0 225deg, var(--c2) 0),
radial-gradient(circle at center, rgba(255, 255, 255, 0.1), #0000 60%);
background-size: var(--s) var(--s);
background-blend-mode: screen, overlay, lighten;
}
/* XiloliX 🤖 starry-night */
.starry-night {
background-color: #000 !important; /* Deep night sky */
background-image:
radial-gradient(#FFD700, rgba(255, 215, 0, 0.3) 3px, transparent 25px), /* Big, golden stars */
radial-gradient(#F2832E, rgba(242, 131, 46, 0.3) 2px, transparent 20px), /* Orange stars */
radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 20px), /* Medium white stars */
radial-gradient(white, rgba(255, 255, 255, 0.1) 1px, transparent 15px), /* Small white stars */
radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 1px, transparent 10px), /* Glowing stars */
radial-gradient(white, rgba(255, 255, 255, 0.5) 2px, transparent 30px), /* Larger white stars */
radial-gradient(#FFD700, rgba(255, 215, 0, 0.3) 2px, transparent 20px), /* Additional golden stars */
radial-gradient(white, rgba(255, 255, 255, 0.2) 1px, transparent 15px), /* Additional white stars */
radial-gradient(#F2832E, rgba(242, 131, 46, 0.3) 1px, transparent 15px); /* Additional orange stars */
background-size:
150px 150px, /* Big golden stars */
120px 120px, /* Orange stars */
100px 100px, /* Medium white stars */
80px 80px, /* Small white stars */
60px 60px, /* Glowing stars */
200px 200px, /* Extra-large white stars */
100px 100px, /* Additional golden stars */
70px 70px, /* Additional white stars */
90px 90px; /* Additional orange stars */
background-position:
0 0, /* Position of golden stars */
20px 40px, /* Orange stars */
10px 20px, /* Medium white stars */
40px 60px, /* Small white stars */
30px 10px, /* Glowing stars */
20px 40px, /* Extra-large white stars */
-30px 25px, /* Additional golden stars */
-15px 45px, /* Additional white stars */
-25px 15px; /* Additional orange stars */
}
/* XiloliX 🤖 blue-green-gradient */
.blue-green-gradient {
background-color: black;
background-image:
radial-gradient(circle at 50% 50%, yellow 0%, transparent 60%),
radial-gradient(circle at 30% 30%, hotpink 10%, transparent 70%),
radial-gradient(circle at 70% 70%, deepskyblue 20%, transparent 80%),
conic-gradient(from 45deg, yellow, hotpink, deepskyblue, yellow);
background-size: 200px 200px, 300px 300px, 400px 400px, 500px 500px;
background-blend-mode: screen, overlay, multiply, normal;
}
/* XiloliX 🤖 aztec-forest */
.aztec-forest {
background-color: #002b1c; /* Deep forest green */
background-image:
repeating-linear-gradient(
45deg,
#14532d,
#14532d 20px,
#1c7a44 20px,
#1c7a44 40px
), /* Forest pattern */
radial-gradient(
circle,
#228b22 10%,
rgba(0, 43, 28, 0) 70%
), /* Green glow */
repeating-conic-gradient(
from 0deg,
#004d33 0deg 20deg,
#006f4e 20deg 40deg,
transparent 40deg 60deg
), /* Aztec-inspired conic */
radial-gradient(
circle at 50% 50%,
#af9500,
rgba(175, 149, 0, 0) 60%
); /* Gold radiant center */
background-blend-mode: overlay, multiply, screen, soft-light;
background-size: 200px 200px, 100% 100%, 300px 300px, 500px 500px;
background-position: 0 0, 50% 50%, 0 0, center;
}
/* XiloliX 🤖 dragon-scales */
.dragon-scales {
--size: 100px; /* Größe der Schuppen anpassen */
--primary: #2EDAF1; /* Hauptfarbe der Schuppen */
--secondary: #2EDAF1; /* Hellere Hervorhebung */
--accent: #F2832E; /* Dunklerer Schatten */
background-color: #222;
background-image:
radial-gradient(circle at 50% 0%, var(--primary) 50%, transparent 51%),
radial-gradient(circle at 50% 100%, var(--secondary) 50%, transparent 51%),
radial-gradient(circle at 50% 50%, var(--accent) 50%, transparent 51%);
background-size: var(--size) calc(var(--size) * 0.866);
background-repeat: repeat;
}
/* XiloliX 🤖 renaissance-parchment */
.renaissance-parchment {
background-color: #f3eac2; /* Renaissance parchment tone */
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 69, 0, 0.6), transparent 50%), /* Bold Pollock splashes */
radial-gradient(circle at 80% 70%, rgba(0, 128, 255, 0.6), transparent 50%), /* More Pollock splashes */
repeating-radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 10px, rgba(0, 0, 0, 0.1) 15px, transparent 25px), /* Circular geometry */
repeating-conic-gradient(
from 0deg,
rgba(0, 0, 0, 0.1) 0deg 5deg,
transparent 5deg 15deg,
rgba(0, 0, 0, 0.1) 15deg 20deg,
transparent 20deg 30deg
), /* Radiating precision */
repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px 20px), /* Sketchy diagonal lines */
repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px 20px); /* More diagonal lines */
background-size:
1000px 1000px, /* Pollock splashes */
800px 800px, /* Pollock splashes */
300px 300px, /* Circular geometry */
300px 300px, /* Radiating precision */
100px 100px, /* Diagonal lines */
100px 100px; /* More diagonal lines */
background-blend-mode: screen, overlay, multiply, multiply, normal, normal;
}
/* XiloliX 🤖 textured-layered-pattern */
.textured-layered-pattern {
background:
radial-gradient(circle at 10% 10%, #888, transparent 70%),
radial-gradient(circle at 90% 20%, #666, transparent 80%),
radial-gradient(circle at 50% 80%, #bbb, transparent 60%),
repeating-conic-gradient(
from 0deg, #333 0%, #444 10%, #555 20%, #666 30%, #777 40%, #888 50%),
repeating-radial-gradient(circle,
#222 0px, #444 5px, #666 10px, #888 15px, #aaa 20px),
linear-gradient(135deg, #555 25%, transparent 25%, transparent 75%, #555 75%, #555),
linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%, #777);
background-blend-mode: multiply, darken, overlay;
background-size: 300px 300px, 400px 400px, 600px 600px, 500px 500px, 200px 200px, 100px 100px, 100px 100px;
background-position: center, top left, bottom right, center, top, left, right;
background-repeat: repeat;
}
/* XiloliX 🤖 conic-pattern */
.conic-pattern {
background:
conic-gradient(from 180deg at 50% 50%, magenta 0deg, yellow 90deg, limegreen 180deg, cyan 270deg, magenta 360deg) 50px 50px,
conic-gradient(from 180deg at 60% 60%, limegreen 0deg, cyan 90deg, magenta 180deg, yellow 270deg, limegreen 360deg) 100px 100px,
conic-gradient(from 180deg at 70% 70%, cyan 0deg, magenta 90deg, yellow 180deg, limegreen 270deg, cyan 360deg) 150px 150px;
background-size: 200px 200px;
background-repeat: repeat;
}
/* XiloliX 🤖 radial-pattern */
.radial-pattern {
background:
radial-gradient(circle at 50% 60%, magenta 25%, transparent 26%) 0 0 / 100px 100px,
radial-gradient(circle at 60% 70%, cyan 25%, transparent 26%) 50px 50px / 100px 100px,
radial-gradient(circle at 40% 50%, yellow 25%, transparent 26%) 25px 75px / 100px 100px,
radial-gradient(circle at 50% 50%, limegreen 25%, transparent 26%) 75px 25px / 100px 100px;
background-color: #000;
background-blend-mode: screen;
background-repeat: repeat;
}
/* XiloliX 🤖 nietzsche-buddha */
.nietzsche-buddha {
background:
radial-gradient(circle at 25% 25%,
rgba(255, 223, 0, 0.8) 10%,
rgba(239, 71, 111, 0.6) 15%,
rgba(255, 255, 255, 0.2) 40%,
transparent 60%) 0 0 / 50px 50px,
radial-gradient(circle at 75% 75%,
rgba(239, 71, 111, 0.8) 10%,
rgba(255, 223, 0, 0.6) 15%,
rgba(255, 255, 255, 0.2) 40%,
transparent 60%) 50px 50px / 50px 50px,
radial-gradient(circle,
rgba(255, 255, 255, 0.05) 5%,
transparent 10%) 0 0 / 25px 25px,
linear-gradient(to bottom,
#1a1c3e, #283048 50%, #3caea3 100%);
background-repeat: repeat, repeat, repeat, no-repeat;
}
/* XiloliX 🤖 precision-chaos */
.precision-chaos {
background-color: #000;
background-image:
linear-gradient(90deg, magenta 25%, transparent 25%, transparent 75%, cyan 75%, cyan),
linear-gradient(0deg, magenta 25%, transparent 25%, transparent 75%, cyan 75%, cyan),
radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.7) 20%, transparent 60%),
radial-gradient(circle at 70% 80%, rgba(128, 128, 128, 0.5) 30%, transparent 70%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 10%, transparent 50%);
background-size: 100px 100px, 100px 100px, 300px 300px, 400px 400px, 200px 200px;
background-position: 0 0, 50% 50%, 20% 30%, 60% 70%, 80% 20%;
background-blend-mode: difference, overlay;
}
/* XiloliX 🤖 luxury-swirls */
.luxury-swirls {
background-color: #000; /* Luxurious black backdrop */
background-image:
repeating-conic-gradient(
from 0deg,
#b11226 0deg, #b11226 30deg,
#d4af37 30deg, #d4af37 60deg,
#000 60deg, #000 90deg
);
background-size: 200px 200px; /* Defines the size of repeating swirls */
background-repeat: repeat; /* Ensures infinite repetition */
}
/* XiloliX 🤖 cyber-space */
.cyber-space {
background-color: #0d0d0d;
background-image:
repeating-linear-gradient(
45deg,
rgba(0, 255, 255, 0.3) 0,
rgba(0, 255, 255, 0.3) 10px,
rgba(255, 0, 255, 0.3) 10px,
rgba(255, 0, 255, 0.3) 20px
),
repeating-radial-gradient(
circle at center,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.2) 15px,
rgba(0, 255, 128, 0.4) 15px,
rgba(0, 255, 128, 0.4) 30px
);
background-blend-mode: screen;
background-size: 200px 200px, 300px 300px;
background-repeat: repeat;
}
/* XiloliX 🤖 burlesque-inferno */
.burlesque-inferno {
background-color: #200; /* Dark reddish-black for infernal ambiance */
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 69, 0, 0.8), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.8), transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 99, 71, 0.6), transparent 60%),
repeating-radial-gradient(
circle,
rgba(255, 69, 0, 0.3) 0,
rgba(255, 0, 0, 0.2) 10px,
transparent 20px
);
background-size: 200px 200px, 300px 300px, 400px 400px, 100px 100px;
background-blend-mode: screen;
}
/* XiloliX 🤖 rainbow-desert */
.rainbow-desert {
background-image:
linear-gradient(to right,
red, orange, yellow, green, blue, indigo, violet
);
background-size: 100% 100%;
background-position: top;
background-repeat: no-repeat;
}
/* XiloliX 🤖 cyberpunk-mandala */
.cyberpunk-mandala {
background-color: black; /* Cyberpunk darkness */
background-image:
/* Outer glow */
radial-gradient(circle, #2EDAF1 10%, transparent 10%),
/* Mandala base */
conic-gradient(from 0deg,
#FFD700 0deg 30deg, /* Gold */
#F2832E 30deg 60deg, /* Orange */
#2EDAF1 60deg 90deg, /* Cyan */
#FFD700 90deg 120deg, /* Gold */
#F2832E 120deg 150deg, /* Orange */
#2EDAF1 150deg 180deg, /* Cyan */
#FFD700 180deg 210deg, /* Gold */
#F2832E 210deg 240deg, /* Orange */
#2EDAF1 240deg 270deg, /* Cyan */
#FFD700 270deg 300deg, /* Gold */
#F2832E 300deg 330deg, /* Orange */
#2EDAF1 330deg 360deg /* Cyan */
),
/* Inner accents */
radial-gradient(circle, transparent 20%, #F2832E 20% 25%, transparent 25%),
radial-gradient(circle, transparent 40%, #FFD700 40% 45%, transparent 45%),
radial-gradient(circle, transparent 60%, #2EDAF1 60% 65%, transparent 65%);
background-size: 50% 50%, 50% 50%, 40% 40%, 30% 30%, 20% 20%;
background-position: center;
background-repeat: repeat;
}
Animated backgrounds
/* XiloliX 🤖 Bubble Gradient Pattern */
.XiloliX-bubles {
margin: 0;
background: radial-gradient(circle at 30% 30%,
rgba(255, 0, 0, 0.7) 10%, transparent 70%),
radial-gradient(circle at 70% 40%,
rgba(255, 165, 0, 0.7) 10%, transparent 70%),
radial-gradient(circle at 50% 70%,
rgba(0, 255, 0, 0.7) 10%, transparent 70%),
radial-gradient(circle at 20% 80%,
rgba(0, 0, 255, 0.7) 10%, transparent 70%),
radial-gradient(circle at 80% 20%,
rgba(75, 0, 130, 0.7) 10%, transparent 70%);
background-size: 200px 200px;
background-repeat: repeat;
animation: bubble-shift 10s infinite alternate;
}
@keyframes bubble-shift {
0% {
background-position: 0 0, 100px 100px, 200px 200px, -100px -100px, -200px -200px;
}
100% {
background-position: 200px 200px, 0 0, -200px -200px, 100px 100px, -100px -100px;
}
}
/* XiloliX 🤖 nebula-stars */
.nebula-stars {
background-color: black;
overflow: hidden;
background-image:
radial-gradient(circle at 20% 40%, rgba(128, 0, 255, 0.6), transparent 60%),
radial-gradient(circle at 70% 20%, rgba(255, 0, 128, 0.8), transparent 70%),
radial-gradient(circle at 50% 80%, rgba(0, 128, 255, 0.6), transparent 80%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, transparent 1%),
radial-gradient(circle, rgba(255, 255, 255, 0.8) 0.5%, transparent 2%);
background-size: 100px 100px, 125px 125px, 175px 175px, 100% 1px, 5px 5px;
animation: nebulae 20s infinite linear, stars 2s infinite linear;
}
/* XiloliX 🤖 Snowfall Gradient Pattern */
.xiloliX-snowfall {
margin: 0;
height: 100%;
background: linear-gradient(to bottom, #001d3d, #003566);
overflow: hidden;
position: relative;
}
/* Small Snowflakes - Foreground */
.xiloliX-snowfall::before {
height: 200vh;
top: -100vh;
content: '';
position: fixed;
left: 0;
right: 0;
background-image:
radial-gradient(white 1px, transparent 1px),
radial-gradient(white 1px, transparent 1px),
radial-gradient(white 1px, transparent 1px),
radial-gradient(white 0.5px, transparent 0.5px),
radial-gradient(white 0.5px, transparent 0.5px),
radial-gradient(white 2px, transparent 0.5px),
radial-gradient(white 2px, transparent 0.5px);
background-size:
100px 100px,
70px 70px,
50px 50px,
30px 30px,
40px 40px,
85px 85px,
80px 80px;
animation: snowfall 16s linear infinite;
opacity: 0.7;
pointer-events: none;
}
/* Large Snowflakes - Background */
.xiloliX-snowfall::after {
height: 200vh;
top: -100vh;
content: '';
position: fixed;
left: 0;
right: 0;
background-image:
radial-gradient(white 2px, transparent 2px),
radial-gradient(white 2px, transparent 2px),
radial-gradient(white 1.5px, transparent 1.5px),
radial-gradient(white 1.5px, transparent 1.5px),
radial-gradient(white 1px, transparent 1px),
radial-gradient(white 1px, transparent 1px);
background-size:
150px 150px,
100px 100px,
80px 80px,
120px 120px,
60px 60px;
animation: snowfall 40s linear infinite;
opacity: 0.4;
pointer-events: none;
}
@keyframes snowfall {
from {
transform: translateY(0);
}
to {
transform: translateY(100vh);
}
}
/* XiloliX 🤖 windmill-pattern */
.xilolix-windmill-pattern {
background: #00d9ff;
position: relative;
overflow: hidden;
}
.xilolix-windmill-pattern::before,
.xilolix-windmill-pattern::after {
content: '';
position: absolute;
inset: 0;
overflow: hidden;
}
.xilolix-windmill-pattern::before {
background: conic-gradient(
from 0deg at 100% 0%,
rgba(43, 197, 135, 0.8) 0deg 30deg,
transparent 30deg 60deg,
rgba(43, 197, 135, 0.8) 60deg 90deg,
transparent 90deg 120deg,
rgba(43, 197, 135, 0.8) 120deg 150deg,
transparent 150deg 180deg,
rgba(43, 197, 135, 0.8) 180deg 210deg,
transparent 210deg 240deg,
rgba(43, 197, 135, 0.8) 240deg 270deg,
transparent 270deg 300deg,
rgba(43, 197, 135, 0.8) 300deg 330deg,
transparent 330deg 360deg);
animation: rotatePattern 10s infinite linear;
mix-blend-mode: multiply;
transform-origin: 100% 0%;
animation-delay: 3s;
}
.xilolix-windmill-pattern::after {
background: repeating-conic-gradient(
from 0deg at 0% 100%, /* Unten links */
rgb(157, 10, 180) 0deg 30deg,
transparent 30deg 60deg,
rgb(157, 10, 180) 60deg 90deg,
transparent 90deg 120deg,
rgb(157, 10, 180) 120deg 150deg,
transparent 150deg 180deg,
rgb(157, 10, 180) 180deg 210deg,
transparent 210deg 240deg,
rgb(157, 10, 180) 240deg 270deg,
transparent 270deg 300deg,
rgb(157, 10, 180) 300deg 330deg,
transparent 330deg 360deg
);
animation: rotatePattern 10s infinite linear;
mix-blend-mode: multiply;
transform-origin: 0% 100%;
animation-delay: 3s;
}
@keyframes rotatePattern {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* XiloliX 🤖 blurred-pyramid */
.xilolix-blurred-pyramid {
margin: 0;
background: linear-gradient(to bottom, #87CEEB, #E8D5AC);
overflow: hidden;
perspective: 1000px;
}
.blurred-pyramid::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-conic-gradient(
from 45deg at 100% 0%,
#87CEEB 0deg 90deg,
#87CEEB 90deg 180deg,
#E8D5AC 180deg 270deg,
#E8D5AC 270deg 360deg
);
background-size: 100px 100px; /* Size of the pyramid pattern grid */
transform-origin: center;
animation: pyramidMove 4.7s infinite ease-in-out; /* Rotating animation */
animation-delay: 3s;
z-index: 2;
}
/* Animation for the pyramid pattern movement */
@keyframes pyramidMove {
0% {
transform: rotateX(30deg) translateY(0);
}
20% {
transform: rotateX(60deg) translateY(-20px);
}
40% {
transform: rotateX(90deg) translateY(-20px);
}
60% {
transform: rotateX(120deg) translateY(-20px);
}
80% {
transform: rotateX(150deg) translateY(-20px);
}
100% {
transform: rotateX(180deg) translateY(0);
}
}
/* XiloliX 🤖 psychedelic-gradient */
.xilolix-psychedelic-gradient {
margin: 0;
background-color: #222;
overflow: hidden;
perspective: 1000px;
background: repeating-linear-gradient(
45deg,
#FFD700 0,
#FFD700 10px,
#F2832E 10px,
#F2832E 20px,
#2EDAF1 20px,
#2EDAF1 30px
);
}
.xilolix-psychedelic-gradient::before,
.xilolix-psychedelic-gradient::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform-origin: center center;
transform: translate(-50%, -50%);
}
.xilolix-psychedelic-gradient::before {
background: repeating-linear-gradient(
60deg,
rgba(255, 215, 0, 0.8) 0%, /* Gelb */
rgba(242, 131, 46, 0.6) 15%, /* Orange */
rgba(46, 218, 241, 0.6) 30% /* Türkis */
),
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.2),
transparent 70%
);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
animation: mainAnimation 10s infinite cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
mix-blend-mode: screen;
}
.xilolix-psychedelic-gradient::after {
background: linear-gradient(
120deg,
#FFD700, /* Gelb */
#F2832E, /* Orange */
#2EDAF1 /* Türkis */
);
clip-path: circle(50% at 50% 50%);
animation: mainAnimation 20s infinite cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
mix-blend-mode: overlay;
}
@keyframes mainAnimation {
0% {
transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
}
25% {
transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
}
50% {
transform: translate(-50%, -50%) scale(1.0) rotate(360deg);
}
75% {
transform: translate(-50%, -50%) scale(0.8) rotate(540deg);
}
100% {
transform: translate(-50%, -50%) scale(0.6) rotate(720deg);
}
}
Marvelous CSS patterns by other Designers
Lea Verou
Lea Verou ist eine Web-Entwicklerin, Speakerin und Autorin, bekannt für ihre innovativen CSS-Pattern.
/* marrakesh */
.marrakesh {
background-color: white;
background-image:
radial-gradient(midnightblue 9px, transparent 10px),
repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
/* tartan */
.tartan {
background-color: hsl(2, 57%, 40%);
background-image:
repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
}
/* retro-circles */
.retro-circles {
background:
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%),
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%),
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
background-color: #63773F;
background-size: 100px 100px;
}
Temani Afif
Temani Afif ist ein CSS-Experte und Autor, bekannt für seine innovativen und kreativen CSS-Lösungen und Patterns.
/* temani-radial */
:root {
--s: 150px; /* control the size */
--c1: #f7d2a1;
--c2: #05057e;
}
.temani-radial {
--_g:
var(--c1) 0% 5% ,var(--c2) 6% 15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
#0000 96%;
background:
radial-gradient(50% 50% at 100% 0, var(--_g)),
radial-gradient(50% 50% at 0 100%, var(--_g)),
radial-gradient(50% 50%, var(--_g)),
radial-gradient(50% 50%, var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
var(--c1);
background-size: var(--s) var(--s);
}
/* temani-triangles */
:root {
--s: 84px; /* control the size */
--c1: #f2f2f2;
--c2: #cdcbcc;
--c3: #999999;
}
.temani-triangles {
--_g: 0 120deg, #0000 0;
background:
conic-gradient(at calc(250% / 3) calc(100% / 3), var(--c3) var(--_g)),
conic-gradient(from -120deg at calc(50% / 3) calc(100% / 3), var(--c2) var(--_g)),
conic-gradient(from 120deg at calc(100% / 3) calc(250% / 3), var(--c1) var(--_g)),
conic-gradient(from 120deg at calc(200% / 3) calc(250% / 3), var(--c1) var(--_g)),
conic-gradient(from -180deg at calc(100% / 3) 50%, var(--c2) 60deg, var(--c1) var(--_g)),
conic-gradient(from 60deg at calc(200% / 3) 50%, var(--c1) 60deg, var(--c3) var(--_g)),
conic-gradient(from -60deg at 50% calc(100% / 3), var(--c1) 120deg, var(--c2) 0 240deg, var(--c3) 0);
background-size: calc(var(--s) * 1.732) var(--s);
}
/* temani-radial-waves */
:root {
--s: 100px; /* control the size */
--c1: #f8b195;
--c2: #355c7d;
}
.temani-radial-waves {
--_g:
var(--c2) 6% 14%, var(--c1) 16% 24%, var(--c2) 26% 34%, var(--c1) 36% 44%,
var(--c2) 46% 54%, var(--c1) 56% 64%, var(--c2) 66% 74%, var(--c1) 76% 84%, var(--c2) 86% 94%;
background:
radial-gradient(100% 100% at 100% 0, var(--c1) 4%, var(--_g), #0008 96%, #0000),
radial-gradient(100% 100% at 0 100%, #0000, #0008 4%, var(--_g), var(--c1) 96%)
var(--c1);
background-size: var(--s) var(--s);
}