Add Color and Life to Your Components with CSS Animations
Are you looking for a way to add some color and life to your website's background? Do you want a solution that's easy to implement and customize? Look no further than CSS3 animations! With just a few lines of code, you can create dynamic, colorful backgrounds for your components. And the best part? These animations won't slow down your website because of their small file size.
<article class="compsoul-background-container">
<h2 class="compsoul-background-heading">compsoul.pl</h2>
<div aria-hidden="true" class="compsoul-background">
<span class="shape-waves"></span>
<span class="shape-square"></span>
<span class="shape-triangle"></span>
<span class="shape-parallelogram"></span>
<span class="shape-rectangle"></span>
<span class="shape-circle"></span>
<span class="shape-trapezoid"></span>
</div>
</article>
.compsoul-background-container {
position: relative;
}
.compsoul-background-heading {
color: #ffffff22;
font-size: 10vw;
font-weight: 800;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.compsoul-background {
--blur: 140px;
--opacity: 0.5;
--speed: 32s;
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
height: 100vh;
overflow: hidden;
position: relative;
width: 100%;
}
.compsoul-background .shape-waves {
--color: #f15412;
--size: 72vw;
background: radial-gradient(circle at 50% 100%, transparent 20%, var(--color) 20%, var(--color) 50%, transparent 50%, transparent),
radial-gradient(circle at 50% 0, transparent 20%, var(--color) 20%, var(--color) 50%, transparent 50%, transparent) calc( var(--size) * 0.5 ) 0;
background-size: var(--size) calc( var(--size) * 0.5 );
display: block;
filter: blur( var(--blur) );
height: 100%;
opacity: var(--opacity);
width: 100%;
}
.compsoul-background .shape-square {
--color: #ff06B7;
--size: 32vw;
background: var(--color);
display: block;
filter: blur( var(--blur) );
height: var(--size);
left: calc( var(--size) * -0.25 );
opacity: var(--opacity);
position: absolute;
top: calc( var(--size) * -0.25 );
width: var(--size);
}
.compsoul-background .shape-triangle {
--color: #f47c7c;
--size: 28vw;
animation: compsoul-background var(--speed) linear infinite;
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
border-bottom: calc( var(--size) * 2 ) solid var(--color);
bottom: calc( var(--size) * -0.25 );
display: block;
filter: blur( var(--blur) );
height: 0;
left: calc( var(--size) * 2 );
opacity: var(--opacity);
position: absolute;
width: 0;
}
.compsoul-background .shape-rectangle {
--color: #570a57;
--size: 32vw;
background: var(--color);
display: block;
filter: blur( var(--blur) );
height: var(--size);
left: 20%;
opacity: var(--opacity);
position: absolute;
top: calc( var(--size) * -0.25 );
width: calc( var(--size) * 2 );
}
.compsoul-background .shape-circle {
--color: #ffef82;
--size: 54vw;
animation: compsoul-background var(--speed) ease-in-out infinite;
background: var(--color);
border-radius: 100%;
display: block;
filter: blur( var(--blur) );
height: var(--size);
opacity: var(--opacity);
position: absolute;
right: calc( var(--size) * -0.25 );
top: calc( var(--size) * -0.25 );
width: var(--size);
}
.compsoul-background .shape-trapezoid {
--color: #00ffab;
--size: 8vw;
animation: compsoul-background var(--speed) linear infinite;
border-bottom: calc( var(--size) * 4 ) solid var(--color);
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
bottom: calc( var(--size) * -0.25 );
display: block;
filter: blur( var(--blur) );
height: 0;
opacity: var(--opacity);
right: 30%;
position: absolute;
width: calc( var(--size) * 4 );
}
.compsoul-background .shape-parallelogram {
--color: #069a8e;
--size: 32vw;
animation: compsoul-background var(--speed) linear infinite;
background: var(--color);
bottom: calc( var(--size) * -0.25 );
display: block;
filter: blur( var(--blur) );
height: var(--size);
left: calc( var(--size) * -0.25 );
opacity: var(--opacity);
position: absolute;
transform: skew(-20deg);
width: var(--size);
}
@keyframes compsoul-background {
0% {
transform: rotate(0) translate(0, 0);
}
25% {
transform: rotate(90deg) translate(-100%, -100%);
}
50% {
transform: rotate(180deg) translate(0, 0);
}
75% {
transform: rotate(270deg) translate(100%, 100%);
}
100% {
transform: rotate(360deg) translate(0, 0);
}
}
compsoul.pl
In this article, I'll show you how to create a background animation using CSS3. You'll learn how to adjust various variables to customize the look and feel of your animation. Here are some of the variables you can play with:
- blur - this variable controls the amount of blur applied to the shapes in the background
- opacity - adjust the transparency of the shapes
- speed - control the speed of the animation
- color - set the color of each shape
- size - change the size of each shape
Try out different combinations of these variables and see what you can create! And if you come up with something cool, don't hesitate to share it in the comments section.