Remove the z-index -100 and change the colour to something other than black.
<style>
:root{
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
box-sizing: border-box;
}
*, *::before, *::after{
box-sizing: inherit;
}
body{
}
.sidebar{
width: 16rem;
padding: 2rem;
height: 100vh;
text-align: center;
background: #1e1f26;
color: white;
position: relative;
z-index: 1;
}
.heading{
text-transform: uppercase;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: .2rem;
width: 100%;
margin-bottom: 1.2rem;
}
.fa-codepen{
margin: 0 0.1rem;
}
.try{
color: #aaaebc;
text-transform: uppercase;
margin-bottom: 0.4rem;
display: block;
width: calc(100%-4rem);
letter-spacing: 0.01rem;
font-size: 0.9rem;
}
.start-coding{
display: block;
font-size: 1.3rem;
color: white;
background-color: black;
padding: 0.4rem 1.8rem;
position: relative;
border-radius: 5px;
width: 100%;
}
.start-coding::before{
content: '';
background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
border-radius: 5px;
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
z-index: -1;
}
.sidebar-list{
text-align: left;
margin: 2rem 0;
}
.list-link{
color: white;
}
.side-list-li:hover{
background: red;
}
</style>
<body>
<aside class="sidebar">
<h1 class="heading">C<i class="fab fa-codepen"></i>odepen</h1>
<h2 class="try">Try our online editor</h2>
<a href="#" class="start-coding">Start Coding</a>
<ul class="sidebar-list">
<li class="side-list-li"><a href="#" class="list-link">Trending</a></li>
<li class="side-list-li"><a href="#" class="list-link">Challenges</a></li>
<li class="side-list-li"><a href="#" class="list-link">Spark</a></li>
</ul>
<a href="#" class="code-pro">CodePen<span class="pro">Pro</span></a>
<img src="https://cdn4.buysellads.net/uu/1/78899/1606751891-Bugfender_-_Carbon_Ads.jpg" alt="">
<p class="lorem">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quam nulla nemo a
sequi
non quaerat deleniti, possimus in quos labore eius atque. Vitae maxime accusamus praesentium harum!
Consectetur, hic.</p>
</aside>
<div class="content"></div>
