HOW I CAN CREATE RIGHT GRADIENT BETWEEN TWO DIVS

Samuel Fernandes

Total Post:159

Points:1117
Posted by  Samuel Fernandes
 1161  View(s)
Ratings:
Rate this:
Hi Every one!

I have two blocks http://imageshack.us/a/img203/9351/555el.png

how i can create gradiend between these blocks like this http://imageshack.us/a/img521/1866/8585.png

this is my css and html code

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Thank you!
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: how i can create right gradient between two divs

    Hi!

    you can create gradiend using below css

    div.fx6Ra:before,
    div.fx6Ra::before {
        content:' ';
        display:inline-block;
        position:absolute;
        top:219px;
        left:633px;
        height:560px;
        width:15px;
        background-image:-webkit-linear-gradient(right,black,transparent);
        background-image:-moz-linear-gradient(to left,black,transparent);
        background-image:-ms-linear-gradient(to left,black,transparent);
        background-image:-o-linear-gradient(to left,black,transparent);
        background-image:linear-gradient(to left,black,transparent);
    }

  1. Vijay Shukla

    Post:100

    Points:700
    Re: how i can create right gradient between two divs

    Hi!

    replace below code from your css and html code

    <style type="text/css">
      div.fx6p1 {
      width: 580px;
      height: 721px;
      background: #EDEDED;
      margin: 40px 0 0 40px; 
      padding: 9px;
      }
    div.fx6Ra {
        width: 200px;
        background: #333333;
        height: 560px;
        margin: 170px 0 0 589px;
        box-shadow: -10px 0 4px 0 #888888;
    }
    </style>
    <div class="fx6p1">
      <div class="fx6Ra">
      </div>
    </div>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!