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

How to Create a CSS ombre gradient blog background. Another simple tutorial from DesignYourOwnBlog.com

How to Create a CSS ombre gradient blog background. Another simple tutorial from DesignYourOwnBlog.com

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 {
PASTE THE CSS HERE
}

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 your content box:

Liked this Tutorial?

Blog-Beautiful-50-tips-make-blog-glow-smThere’s 49 more tips and tutorials just like this in my new eBook, Blog Beautiful: 50 Tips + Tricks to Make Your Blog Glow which is now available for pre-sale!

Special pre-sale prices end in one week!

Your Turn

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!!

Want to have a say in the content I share in 2015? Fill out my 2 minute survey!

Hey friend, want free DIY design stuff?

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

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

13 Comments

Leave a Reply

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

CommentLuv badge