Technique to achieve gradient which can be full height or header only

I'm looking at the heroku website: https://www.heroku.com/

I was curious how they have achieved the ability to have a full page gradient on the home page with content under it, and then on the next page, seemingly with very similar markup, they have been able to keep the exact same section of gradient but applied only to the navigation bar at the top.

How might I get that kind of technique?

Apply the gradient to the body, and then having a transparent div on the front page?
Apply the gradient to a full height div, then have a transparent header div on top of it with a white coloured body.

Solution

You can use your inspect tool to see their css:

 background-image:
     -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),
     -webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);

This is just a bit complicated, but not too much: 1) You can have multiple backgrounds, which is often useful as a fallback or for more complex gradients

2) You can set the origin and "destination" of a gradient using percentages or just names like "top right" "bottom" and such, thus avoing having to give an angle - so it's always the same thing, independent of the aspect ratio.

Worth noting is, that they specifically only support webkit (Chrome, Safari), even though I'm pretty sure this could easily be done on any modern browser.

Hope this clears it up a bit.