I am trying to achieve a fading effect for the background color of a div that contains a form. The solid background should fade out to transparent based on a pixel variable, allowing the background behind it to show through. This pixel value determines how much of the colored background fades out towards the edges of the div.
Here is the current appearance of the div:
https://i.stack.imgur.com/3Qo5Q.png
This is the desired look I am aiming for:
https://i.stack.imgur.com/0eJRP.png
Since the div's size is variable (height: auto;), using an image as the background is not possible in this case.
I attempted to use linear gradients in this Fiddle to achieve the effect but my lack of experience with them may have led me to cancel out some settings.
HTML:
<div class="formBackground">
<form id="gform" method="POST" action="***">
<input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
<input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
<input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
</form>
</div>
CSS:
.formBackground {
top: 0px;
float: left;
margin-left: 50%;
transform: translateX(-50%);
width: 50%;
height: auto;
/* Adjust gradient values to control fading */
background-image : linear-gradient(to bottom,
rgba(55,54,51, 0),
rgba(55,54,51, 1) 90%);
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
margin-top: 100px;
overflow: hidden;
margin-bottom: 4.5em;
}
Any help or suggestions would be greatly appreciated. Thank you!