Creating a full gradient background with a clipping mask can be tricky. I used an SVG to achieve the desired shape by cutting part of the background color, but now I'm facing a challenge with blending the colors seamlessly.
I tried setting the SVG color to match the beginning color of the gradient, but as the screen height changes, the colors don't stay consistent. Here is my current code:
body {
/* Keep the inherited background full size. */
background-attachment: fixed;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding-left:100px;
padding-right:100px;
}
.glass {
height: 100vh;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
position: relative;
z-index: 1;
background: inherit;
overflow: hidden;
flex-grow: 100;
background: rgb(255,235,59);
background: linear-gradient(180deg, rgba(255,235,59,1) 0%, rgba(253,216,53,1) 54%, rgba(249,168,37,1) 100%);
}
svg {
background: white;
background-size: cover;
width: 100%;
display: block;
position: absolute;
}
.container{
padding-top:40vh;
}
label{
color: white !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="glass">
<svg viewbox="0 0 100 25">
<path fill="#ffeb3b" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>
<div class="container">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
</div>
</div>Is there a better solution than using SVG for this shape? Any suggestions are welcome!
Thank you.