Trying to get color gradient in a circle in css but doesnt work-CodePudding

Trying to get some color gradient in a circel for the website. I dont no why but it doesn't show. if i put a background-color it doe work but i think you cant put a gradient in there. does someone why is doesn't work?

I think it has something to do with the nav bar. because i paste that from the internet

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');

*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

.cl__over_ons{
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background-image: rgb(209, 205, 248), rgb(187, 222, 252);
    display: inline-flex;
    
}


.main {        
  height: 100vh;
  width: 100%;
  background-image: url(images/background.png);
  background-position: center;
  background-size: cover;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
}


.logo{
    width: 180px;
    cursor: pointer;
    margin: 20px 30px 0px -40px; 
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Montserrat;


}

.nav{
    margin: -50px 200px 0px ;
    display: flex;
    align-items: flex;
    list-style-type: none;
    

}

.nav__item{
    margin: 0px 15px;

}

.nav__link{
    display: flex;
    font-weight: 500; 
    font-size: 22px;
    color: #666;
    position: relative;
    padding: 5px 0; 
    overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
    

}

.nav__link:before{

    content: '';
    position: absolute;
    top: 0; 
    right: 100%;
    width: 50%;
    height: 2px; 
    background: #000;
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);

}

.nav__link:after{

    content: '';
    position: absolute;
    bottom: 0; 
    left: 100%;
    width: 50%;
    height: 2px; 
    background: #000;
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);

}

.nav__link:hover{
    color: #000;

}

.nav__link:hover:before{
    right: 0;
}

.nav__link:hover:after{
    left: 0;
}

<!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>Marketing</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <div >
        
         <img src="images/Logo.png" >
       
  
   <ul >
       <li >
           <a href="#" title="" >home</a>
       </li>
       <li >
           <a href="#" title="" >over ons</a>
       </li>
       <li >
           <a href="#" title="" >diensten</a>
       </li>
       <li >
           <a href="#" title="" >contact</a>
       </li>
   </ul>
   <div >
    
   </div>
</div>


</body>

</html>

CodePudding user response：

if you want a radial (circular) gradient, you should define your gradient like this

 background-image: radial-gradient( rgb(209, 205, 248) , rgb(187, 222, 252) );

for more information and different possible styles, have a look at Mozilla documents

CodePudding user response：

You need to define background in other way. Instead of using background-image use this:

// if you want radial gradient`;
background: radial-gradient(rgb(209, 205, 248), rgb(187, 222, 252));

// if you want linear gradient`
background: linear-gradient(rgb(209, 205, 248), rgb(187, 222, 252))

You can use nice gradient generator on cssgradient.io