In The Easy Way to make nice looking Gradients I shared a technique to create pleasing gradients easily using a graphics application like Inkscape. The thing is you can just as easily apply the principles to CSS. Browser support for CSS3 gradients is quite good across the board (save IE9 & Opera Mini) so this’ll work fine.

The technique is the same: apply a gradient overlay to a base colour. Translating that into CSS-speak, the gradient overlay will be the background-image property while the base colour will take up the background-color property. Note that I’m only using the CSS3 standard declaration structure in the example below. In your production code you’d likely include all the vendor-prefixed code.

.site-hd {
  background-color: red; // The base colour.
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); // The gradient overlay.

  // ... any other additional CSS declarations.
}

Adjusting the gradient proceeds in the same fashion: change the base colour to your liking and play around with the alpha transparencies of the overlay end-points until the gradient looks the way you want.

When it comes to creating the gradient overlay I suggest using an online tool like the Ultimate CSS Gradient Generator. Take note that the generated code applies the gradient to the background property so you will need to change the declaration to use background-image or it will likely over-write your value for background-color.

CSS classes give us a way to “clone” elements too. Play around with this CodePen to see it in action.