Search code examples
htmlcsslinear-gradientscss-gradients

Converting this gradient image to CSS gradients

I'm trying to use CSS to generate the below gradient image. However, I'm struggling with the alignment. You will notice in my snippet the problem. I tried absolute positioning them but that was just making things worse.

gradient

.gradients {
  position: relative;
  width: 100%;
}

.gradients div {
  height: 40px;
}

.bottom-gradient {
  -ms-transform: rotate(0.6deg);
  -webkit-transform: rotate(0.6deg);
  transform: rotate(0.6deg);
  background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
  background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}

.top-gradient {
  -ms-transform: rotate(0.6deg);
  -webkit-transform: rotate(0.6deg);
  transform: rotate(0.10deg);
  background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
  background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
  <div class="top-gradient"></div>
  <div class="bottom-gradient"></div>
</div>

Solution

  • position: absolute or a negative margin would work, but require hard-coded values. A more flexible alternative would be to add transform: translateY(-100%) to your .bottom-gradient.

    As you already have a transform: rotate(0.6deg) on this element, you can just append the translateY to it:

    .bottom-gradient { transform: rotate(0.6deg) translateY(-100%) }

    In an effort to replicate the image a bit closer, I've also made the following changes:

    • Changed the rotation of the gradients to 1deg and -1deg.
    • Changed the height to 16px;

    .gradients {
  position: relative;
  width: 100%;
}

.gradients div {
  height: 16px;
}

.bottom-gradient {
  -ms-transform: rotate(-1deg) translateY(-100%);
  -webkit-transform: rotate(-1deg) translateY(-100%);
  transform: rotate(-1deg) translateY(-100%);
  background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
  background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}

.top-gradient {
  -ms-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
  background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
  background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
    <div class="gradients">
  <div class="top-gradient"></div>
  <div class="bottom-gradient"></div>
</div>