CSS gradient across multiple elements

Question

I was wondering if one CSS3 gradient background can be applied to multiple elements. In other words, the gradient extends to the parent element, but is visible only inside the child elements.

After searching, I found this topic: Applying a gradient over multiple views

This is exactly my problem, although I need it as CSS/HTML code.

To visualize the problem, I took two photos:

This is a basic setting. Two <div> that need a gradient background are inside the larger <div> element.

As you can see, the gradient in the second image quickly disappears from element A to element B. This effect is easily implemented in most image editing programs, so I could just use a suitable image to get the desired effect.

However, since images are probably not the best way to solve this problem, I hope to find an answer here on how to do this only with CSS . I used to use gradients, but I have not yet found a solution to this problem myself.

Any help is appreciated.

EDIT (06/01/15 13:30 GMT + 1): Elements A and B should have round corners. The encompassing gradient was supposed to be radial-gradient , but this is not necessary. Perhaps the problem is really not solvable.

Answer 1

(Even if this question is pretty old ...)

Take a look at Multiple.js - which describes how to apply a gradient to multiple elements without js .

Quote from the demo page:

 .selector { background-image: linear-gradient(white, black); background-size: cover; background-position: center; background-attachment: fixed; /* <- here it is */ width: 100px; height: 100px; } 

background-attachment: fixed expands the background to the size of the viewport and displays the corresponding fragment in each element, which is exactly what you need!

The idea behind this is simple as smart and works for most modern browsers (IE8 too).

If applicable, looks like :

Answer 2

Demo: https://jsfiddle.net/andrewgu/gptbyejt/

One way to achieve this is that you can always fake it with a solid background color . You show the gradient of the div in the background, and any div content you want, split with an overlay div whose color matches the background.

Pros: flexible, compatible

Cons: only solid background colors

---

Another way is to use CSS clipping . You can do this using CSS declarations clip-path and -webkit-clip-path . This basically makes the element transparent. However, you need to specify the size of each element in advance and adjust it a little to display the elements correctly. This method works with a non-continuous background. Contrary to popular belief, CSS cropping is pretty good with cross-browser compatibility.

Pros: patterned backgrounds compatible

Cons: Defined sizes of children, customization

Answer 3

The combination of background-attachment: fixed and iframe can do this trick for you.
Check nexts.imtqy.com/Multiple.js and pay attention to the section How it works