html - background-color with gradient transparent -

i have following html have div background color came db

<div class="period" style="background-color: <%= color %>">     <div class="day available">         <div> 3 </div>     </div> </div> 

on div class "day available" want apply gradient have 25% of transparent , 75% of green, can continue view period color , see availability.

i have css class

.day{     &.available{         background: linear-gradient(0deg, $available 0%, $available 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 100%); /* w3c */     } } 

with have gradient displayed, can't see blue in transparent section

what i'm doing wrong?