CSS Gradient, web sitelerinde arka planlarda renk geçişleri yapmak için kullanılır ve tasarımda dinamik bir görünüm sağlar. Üç temel gradyan türü vardır: linear (düz), radial (dairevi) ve conic (konik). Bu gradyanlar sayesinde renkler arasında yumuşak geçişler elde edilir.
Linear gradient, renklerin yatay, dikey veya çapraz yönlerde bir çizgi boyunca geçişini sağlar. Bu geçişler, kutular, düğmeler veya arka planlar için kullanılabilir.
Radial gradient, merkezden başlayarak dışa doğru yayılan dairesel renk geçişleri oluşturur. Bu gradyan türü, özellikle dikkat çekici arka planlar için tercih edilir.
Conic gradient, bir merkezden başlayarak saat yönünde veya ters yönde konik bir şekilde renk geçişi sağlar. Grafikler ve benzersiz arka planlar oluşturmak için kullanışlıdır.
Aşağıdaki kod, linear, radial ve conic gradyan türlerinin hepsini bir arada kullanarak bir arka plan oluşturur. Bu örnekte tüm gradient türlerini aynı kutu üzerinde görebilirsiniz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gradient Örneği - Kodlamaklazim.com</title>
<style>
.gradient-box {
width: 400px;
height: 400px;
background: linear-gradient(to right, #ff7e5f, #feb47b),
radial-gradient(circle at center, #43cea2, #185a9d),
conic-gradient(from 90deg, #ff9966, #ff5e62);
background-blend-mode: screen;
border: 2px solid #333;
}
</style>
</head>
<body>
<h1>CSS Gradient Kullanımı - Kodlamaklazim.com</h1>
<div class="gradient-box"></div>
</body>
</html>
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
