Search code examples
csselementradial-gradients

Need help making a CSS radial-gradient that flows seamlessly through 2 elements that are not of the same height or width

http://jsfiddle.net/nicktheandroid/F8v2c/3/

I'm trying to make a radial gradient that flows seamlessly between 2 sibling elements - starting from 10px or 20px to the right of the button, flowing down about half way down through the ".content" div.

I believe this just takes correctly positioning the gradients for both elements so it looks like it's one flowing radial gradient, that's the problem, I've been trying to do this but I've become frustrated - and the answer might help others.

There's a background behind the menu, so I cannot simple 'white-out' the portion next to "features" in the image below - see the jsfiddle.

See image for example.

Example of radial gradient flowing through 2 elements seamlessly

Solution

  • I've posted a quick update to your jsfiddle at http://jsfiddle.net/F8v2c/9/

    To work out the position you need to set a height on the button, then you know how much to offset the gradient by. On the button we have:

    padding:10px;
height:21px;

    So we know the total height of the box is 41px
    (21px height +10px top padding +10px bottom padding)

    So to have the centre of the gradient 10px below the button we would use 51px for the vertical position, the horizontal doesn't matter as long as it is the same on both the button and the dropdown. Unless the button and dropdown are the same size percentages will not work, so we will set the size of the circle in pixels (300px).

    background-image: radial-gradient( 74px 51px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);

    On the drop-down the css is almost the same except instead of the centre of the gradient being 10px below the bottom it is 10px from the top.

    background-image: radial-gradient( 74px 10px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);