CSS ile Hareketli Renkli Gradient Arka Plan

YouTube'ta Takip Et →

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka planın renkler arasındaki geçişini de CSS ile yapmanız mümkün. Açısı, hangi renklerin geçiş yapacağı, hızı gibi hareketi ve görüntüyü etkileyen faktörleri de belirtebiliyorsunuz.

Aşağıdaki örnekte gradient, body etiketine veriliyor. Dört farklı renkte ve 45 derecelik bir açıyla bir arka plan atanıyor. Sonra da 0%, 50% ve 100% olmak üzere 3 farklı keyframe ile arka plandaki gradient’e hareket veriliyor.

body {
	margin: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 500% 500%;
	animation: animeBG 15s ease infinite;
	animation-direction: alternate;
}

@keyframes animeBG {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

Sonrasında yapmanız gereken index.html sayfasında link etiketi ile style.css dosyasını çağırmak.

CSS ile gradient efektini kolaylaştıran online servisler de var. Bunlardan biri gradient-animator. Bu sayfada size kolaylık olsun diye, gradient kodlarını kolayca elde edebileceğiniz bir proje yapmışlar. İstediğiniz türde gradient renklerini kombine ederek sayfanızı canlandırabilirsiniz.