27

I was wondering if it is possible to apply a single CSS3 gradient background to multiple elements. In other words, the gradient spans over the parent element but is only visible inside the child elements.

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

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

To visualize the problem, I made two pictures:

Image 1

This is the basic setting. The two <div>s needing a gradient background are inside a larger <div> element.

Image 2

As you can see, the gradient in the second image perfecly fades from element A to element B. This effect is easily doable in most image-editing programs, so I could just use an appropriate image to get the desired effect.

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

Any help is appreciated.

EDIT (06/01/15 13:30 GMT+1): The Elements A and B should be able to have round corners. The spanning gradient was originally supposed to be a radial-gradient, but it does not need to be. Maybe the problem is really not solvable.

Improve this question
6
  • How complex are the child shapes you are considering? In the above example, you could probably fake it by making both child shapes one and adding the middle bar. Commented Jan 6, 2015 at 2:52
  • Another idea: It would be a little wacky, but you could probably calculate the necessary gradients with js and apply them manually, based on each child elements' positioning. Especially if you are thinking a vertical or horizontal gradient. Commented Jan 6, 2015 at 2:54
  • 1
    How about setting the gradient as the background and using a CSS clipping mask to create the rectangles? Commented Jan 6, 2015 at 2:58
  • This might help: sarasoueidan.com/blog/css-svg-clipping Commented Jan 6, 2015 at 3:00
  • Found this: http://www.html5rocks.com/en/tutorials/masking/adobe/?redirect_from_locale=de still looking through, tho Commented Jan 6, 2015 at 14:14

3 Answers 3

Reset to default
43

(Even if this qestion is quite very old...)

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

Quoted 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 background to viewport's size and displays in every element appropriate chunk, exactly what is needed!

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

If applied it looks like this: example

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I didn't even know about background-attachment! So good.
5

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

One way to accomplish this is that you could always fake it with a solid background color. You display the gradient div in the background and whatever content divs you want, separated with an overlaying div whose color matches the background.

Pros: Flexible, compatible

Cons: Solid background colors only

Method 1

The other way is to use something called CSS clipping. You can do this using the CSS declarations of clip-path and -webkit-clip-path. This basically makes part of an element transparent. However, you need to specify the size of each element beforehand, and tweak it around a bit to get the items to display correctly. This method works with non-solid backgrounds. Contrary to popular belief, CSS clipping is pretty good with cross-browser compatability.

Pros: Patterned backgrounds, compatible

Cons: Defined child-element sizes, tweaking

Method 2

Improve this answer

4 Comments

Nice idea! Will the clip-path thing work on elements with border-radius?
I just noticed the clip example not working in firefox. Does firefox simply not support this?
Apparently, clip-path only works in Firefox 33+, and even then only through the url parameter, not polygon. This means you need to upload a sized SVG file to define the clipping region. It remains completely unsupported in Internet Explorer and Opera Mini.
@curious, CSS clipping will work on elements with border-radius iff you redefine the clipping region to match the element's.
1

Combination of background-attachment: fixed and iframe may do this trick for you.
Check out nexts.github.io/Multiple.js and pay attention to "How it works" section

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.