<section>
   <h1>Hareketli Arka Planlar</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde hic veniam illo aspernatur temporibus, molestiae vero nam, mollitia consequuntur reprehenderit expedita? At maiores laborum temporibus dicta dolorum blanditiis ullam cupiditate! Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde hic veniam illo aspernatur temporibus, molestiae vero nam, mollitia consequuntur reprehenderit expedita? At maiores laborum temporibus dicta dolorum blanditiis ullam cupiditate!</p>
</section>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');

section{
  width: 100%;
  height: 100vh;
  background: linear-gradient(-45deg, oklab(0.3 -0.03 -0.04) 0%, oklab(0.54 -0.08 0) 13%, oklab(0.82 -0.13 0.08) 25%, oklab(0.11 -0.13 0) 38%, oklab(0.3 -0.03 -0.04) 50%, oklab(0.54 -0.08 0) 62%, oklab(0.82 -0.13 0.08) 75%, oklab(0.11 -0.13 0) 87%, oklab(0.3 -0.03 -0.04) 100%);
  background-size: 400% 400%;
  position: relative;
  animation: arkaPlanaHareketKat 7.5s ease-in-out infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

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
























* {
  margin: 0;
  padding: 0;
  outline: 0;
}

body {
  font-family: 'Poppins', sans-serif;
}

h1{
  color: #fff;
  background: rgba(255,255,255,.2);
  padding: 40px 80px;
  font-size: 50px;
  border-radius: 10px;
    -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

p {
  color: #fff;
  background: rgba(255,255,255,.2);
  padding: 20px;
  font-size: 14px;
  border-radius: 10px;
    -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  width: 680px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.