---
title: "how i can create right gradient between two divs"  
description: "how i can create right gradient between two divs"  
author: "Samuel Fernandes"  
published: 2013-04-08  
updated: 2013-04-08  
canonical: https://www.mindstick.com/forum/735/how-i-can-create-right-gradient-between-two-divs  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# how i can create right gradient between two divs

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](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) and [html](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii)\
<[style](https://www.mindstick.com/articles/126300/apa-citation-style-get-to-know-about-it-for-your-next-assignment) type="[text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions)/css"> div.fx6p1 { width: 580px; height: 721px; [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp): #EDEDED; [margin](https://answers.mindstick.com/qa/104990/what-is-a-margin-call): 40px 0 0 40px; padding: 9px; }div.fx6Ra { width: 200px; background: #333333; height: 560px; margin: 170px 0 0 589px;}</style><div [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp)="fx6p1"> <div class="fx6Ra"> </div></div>\
Thank you!

## Replies

### Reply by Vijay Shukla

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>
```

### Reply by AVADHESH PATEL

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);}


---

Original Source: https://www.mindstick.com/forum/735/how-i-can-create-right-gradient-between-two-divs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.