Animated Background in CSS

Cascading Style Sheets (CSS) can help you do more than just determine colors, fonts, or the positioning of certain elements. You can use CSS to create trendy animations and visual effects. You don't need to know JavaScript or even HTML and create different kinds of animations and environments on your website.

Our team has researched CSS animated background examples that can help you create fun websites. We want to share a few of our favorite ones with you. The CSS animated background examples from our site are suitable for different levels of developing skills, so we are sure everyone will find something.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Background</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="card">
      Welcome to Tutor Joes
    </div>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  background-image: linear-gradient(to right bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);
  background-size: 400% 400%;
  animation: animateBg 2s ease infinite;

  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes animateBg {
  
  0%{
    background-position: 0%;
  }
  50%{ 
    background-position: 100%;
  }
  100%{
    background-position: 0%;
  }
}

.card{
  width: 650px;
  height: 300px;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  border-radius: 5px;

  font-size: 35px;
  font-weight: 700;
  text-align: center;
  line-height: 300px;
  color:#051937;
}

Output