Css Gradient Degrade Arka Plan

Css Gradient Background

Css Gradient Background   

     Html Css stil kodları ile istediğimiz alanın arka planını degrade yani renk geçişli olarak nasıl ayarlıya bileceğimizi css kodlarını kullanarak gradient background oluşturalım. Html arka planında bildiğiniz üzere bir çok degrade çeşidi olduğundan burada en fazla kullanılan bir kaç gradient backgroundı size göstereceğim. ( <style type="text/css"> background-image: gradient(); </style> )

Mavi Beyaz Doğrusal Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_1{
background-image: linear-gradient(to bottom, #ffffff 0%, #5adaf3 100%);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;
}
</style>

Mavi Beyaz Soldan Sağa Doğre Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_2{
background-image:linear-gradient(to right, #5adaf3 , white);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>

Mavi Beyaz Sol Üstten Sağ Alta Doğre Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_3{
background-image:linear-gradient(to bottom right, #5adaf3 , white);
width:99.3%;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>

Mavi Beyaz Çizgi Açılı Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_4{
background-image:linear-gradient(-90deg,#5adaf3 , white);
width:99.3%;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>

Beyaz Yeşil Mavi Üstten Alta Doğru Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_5{
background-image:linear-gradient(white,  #00ffcc ,#5adaf3);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>

Soldan Sağa Doğru Çoklu Renk Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_6{
background-image:linear-gradient(to right, yellow,red,violet,indigo,green,blue); 
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>

Daire Şeklinde Çoklu Renk Radyal Degrade

Uygulama Css Kodu

<style type="text/css">
.degrade_7{
background-image:radial-gradient(circle, green,indigo ,blue);
width:auto;
border: 5px solid black;
text-align:center;
padding: 70px 0;
color:black;
font-size:25px;
font-weight;bold;
margin:5px;;
}
</style>