Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Stephen Blank
Stephen Blank
16,286 Points
Posted by Stephen Blank
Stephen Blank
16,286 Points

Gradient border in a pseudo element

I am trying to find a way to use a pseudo element to overlap the div above it, and then add a gradient to fade top to bottom, from transparent to a solid color, in order to fade out the contents of the upper div.

I am able to create a transparent overlap using the following code. Does anyone know of a way to change this so that instead of having .5 opacity across the entire overlap, it does a gradient instead?

http://jsfiddle.net/m7hd07uk/

<div class="container">
    <div class="box"></div>
</div>

.container {
    width: 500px;
    height: 500px;
    background: blue;
    padding-top: 100px;
}
.box {
    margin: auto;
    width:277px;
    height: 200px;
    background-color:#FCFBDF;
    position: relative;
}
.box:before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:0.5;
    border-top: 40px solid red;
    margin-top: -40px
}

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You need to apply a gradient to your border property on your .box :before style.

Try something like

border:   linear-gradient(from top, #color1 #color2);

Where color1 and color2 are your property values.

I'm not sure if this is exactly right as the syntax is different for different browsers but check out Guil's CSS Foundations course where he explains gradients there. :(