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
- Go to the Ultimate CSS Gradient Generator
- 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.
- 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.
- Once you’re happy with your gradient, select the orientation (vertical, horizontal, diagonal…) that you’d like your gradient to go.
- Copy the resulting CSS and paste that CSS into your style sheet inside the brackets for the body tag:
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?
There’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!
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!