By signing up, you consent to receive email newsletters from me periodically.

How to Create a CSS Ombré (gradient) Background for Your Blog

How to Create a CSS ombre gradient blog background. Another simple tutorial from Plus sign up right now for my free video training workshop on CSS just for bloggers!

Background courtesy of

In the design world, ombre has been a pretty popular trend the last few years, but in the world of web design it’s been a pretty solid staple for quite some time.

And for good reason: A gradient background can add a beautiful yet subtle touch to your blog’s design. It doesn’t overwhelm and it’s not as boring as a solid color.

Let’s see how ridiculously easy it is to add a nice gradient/ombré background to your blog!

First, you might want to get up to speed on how to edit the CSS in your blog.

How to Create a Gradient Background in CSS

  1. Go to the Ultimate CSS Gradient Generator
  2. Create your gradient either by selecting a preset at the top or creating your own. Double click the little colored boxes below the gradient bar to change their colors. Drag the boxes left or right to change the amount of fade between colors.
  3. Two boxes next to each other will create a hard line between the two colors, pulling them further apart will create more of a fade.
  4. Hard vs Soft CSS Gradient. Creating a CSS gradient (ombre) background for your blog is easy!

    Hard vs Soft Gradient created by pulling the color boxes closer or further away from each other

  5. Once you’re happy with your gradient, select the orientation (vertical, horizontal, diagonal…) that you’d like your gradient to go.
  6. Creating a CSS gradient (ombre) background for your blog is easy!

    You can choose to have your gradient go up to down or reverse the colors from down to up, go diagonally or horizontally. The most common is vertical.

  7. Copy the resulting CSS and paste that CSS into your style sheet inside the brackets for the body tag:

body {

You can add this type of gradient to more than just the body tag. For example you can add gradient CSS to the style sheet for a callout box:


Wanna learn more CSS tricks to beautify your blog? Sign up for my free CSS Video Training Series! Sign up now!Sign up for my upcoming FREE CSS video training series starting August 7, 2017!


Super Easy Right??!

Wanna learn more CSS tricks to beautify your blog? Then sign up for my free 4 part CSS for Bloggers video training workshop!

Got questions about using a gradient background? Or just want to show off your new gradient background? Please share with us below, I love to hear your comments!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for


Leave a Reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.