Text clip through padding

Question

I am trying to make my "Register" text as well as my create button background transparent through the padding in order to reveal the background through them.

here is the render of what it looks like

Right now I am using a linear gradient but the background is a video so eventually, it looks off and I want to see if there's a solution to this.

Here are my HTML and CSS Files

HTML

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}
Sign Up
{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="../static/css/signin.css">
{% endblock %}

{% block signup %}
  <form class="form-signin" method="POST" action="signup">
    <h2 class="form-signin-heading">REGISTER</h2>
    <input id="csrf_token" name="csrf_token" type="hidden" value="ImE1Y2Y2ZGJiMzg0Y2E4MTY0MmZiOTVkZjdhYzMxZTc5MWYzN2QzNTgi.X9lmaA.J_q7OS88E1Dy-J__RgmbVU4XnKA">
    <div class="form-group required"><label class="control-label form-labels" for="username">Username</label>
        <input class="form-input" id="username" name="username" required type="text" placeholder="Enter username" value=""> 
    </div>
    <div class="form-group  required"><label class="control-label form-labels" for="email">Email</label>
        <input class="form-input" id="email" name="email" required type="text" placeholder="Enter email" value="">
    </div>
    <div class="form-group required"><label class="control-label form-labels" for="password">Password</label>
        <input class="form-input" id="password" name="password" required type="password" placeholder="Enter password" value="">
    </div>
    <p class="AHAC">Already have an account?<a class="AHAC" href="login"> Login.</a></p>
    <center><button class="form-button" type="submit">Create</button></center>
  </form>
{% endblock %}

CSS

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap);

.form-signin {
  max-width: 500px;
  padding: 60px;
  margin: 0 auto;
  background-color:rgba(255, 255, 255, 1);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, .2);
  border-radius: 15px;
  margin-top:8%;
  font-family: 'Open Sans', sans-serif;

}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 15px;
  margin-top:auto;

}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 10px;

}
.form-button {
  background: linear-gradient(103deg, rgba(235,131,147,1) 0%, rgba(187,147,227,1) 39%, rgba(235,195,227,1) 100%);
  border: none;
  color: white;
  padding: 15px 220px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  margin: auto;
  transition-duration: 0.2s;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 15px;
}
.form-button:hover {
  

}
.form-signin-heading {
  font-size:40px;
  background: linear-gradient(103deg, rgba(235,131,147,1) 0%, rgba(187,147,227,1) 39%, rgba(235,195,227,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.form-labels {
  font-weight: 600;
  color:grey;
}
.AHAC {
  color:grey;
  font-weight: 600;

}

.AHAC a {
  color:rgba(187,147,227,1);
  font-weight: 600;
  text-decoration: none;
  /*text-transform: uppercase;*/

}