After numerous attempts, I have yet to successfully create the desired effect on the screen I am currently working on:
https://i.sstatic.net/BonQa.png
My goal is to achieve a transparent effect using a gradient as a background, but so far my efforts have been unsuccessful. I have experimented with the linear-gradient() function in CSS and adjusting the opacity, but the result was not what I had hoped for:
https://i.sstatic.net/vbIGW.png
I also tried incorporating a transparent SVG with the same gradient, as well as utilizing the SVG with reduced opacity, but unfortunately, these attempts also did not yield the desired outcome:
https://i.sstatic.net/10voI.png
https://i.sstatic.net/oaQIm.png
Below is the CSS and HTML code that I have been using:
.login-section {
.card {
position: absolute;
top: 30%;
box-shadow: 1px 3px 9px 3px rgba(142, 142, 142, 0.19);
border-radius: 10px 10px 10px 10px;
min-height: 300px;
}
.gradient {
background: url(../../../../assets/images/login.svg);
}
.login-form {
}
.logo {
max-height: 100px;
}
} <section class="login-section d-flex flex-row justify-content-center">
<div class="card w-100 border-0">
<div class="card-body row p-0 mx-0">
<div class="col gradient d-flex flex-column justify-content-center">
<div class="d-flex flex-row justify-content-start pb-4">
<img src="" alt="">
</div>
<h5 class="text-white">Lorem Ipsum Dolor Sit Amet Lorem Ipsum</h5>
</div>
<div class="col login-form py-4 px-5">
<p color="#636363" class="d-flex justify-content-center">Seja bem-vindo</p>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary w-100">Submit</button>
</form>
</div>
</div>
</div>
</section>