forum

Home / DeveloperSection / Forums / how i can create right gradient between two divs

Ask Question

how i can create right gradient between two divs

Samuel Fernandes194808-Apr-2013
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!
css-css3css-css3 
Updated on 08-Apr-2013
Samuel Fernandes

Samuel Fernandes

Follow

Can you answer this question?

Answer

2 Answers

Vijay Shukla

Vijay Shukla

08-Apr-2013
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>
AVADHESH PATEL

AVADHESH PATEL

08-Apr-2013
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);
}

Liked By