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!
[Tweet “Tutorial: create an ombre (gradient) background for your blog in just a few seconds!”]
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:
body {
PASTE THE CSS HERE
}
[Tweet “It takes just a few seconds to create a beautiful ombre background for your blog! Tutorial:”]
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:
FREE 4 PART VIDEO TRAINING!
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!
25 Responses
Beautiful ombre. Great tutorial:)
Thanks Ilona, I appreciate the compliment!
I love this! I just had my web site updated to Zephyr theme and I love it. But I have some design elements to work out. Top of the list is the banner across every page that hosts the title of said page! I want to use this technique!
May I ask where to paste the code changing my page banner? You can see it here hosting “Photography.” http://springboardforsuccess.com/styling/photography/
Thank you!!!
Hi Robin,
I am not sure you can do this without editing the code. The problem is that the div that holds that background image has the style set right in the code, not in the style sheet. Perhaps it’s because it’s built into the theme that you can upload whatever background image to that piece?
It’s hard to say without being logged into your particular theme how it would be done, but if you’re able to switch out the background image, you could always find a gradient image you like and use that and upload it?
Sorry I’m not more help at the moment!
Thank you for replying! Yes, I think that is exactly what I have to do. Now just finding the right green!
Very awesome post , any thoughts on how neil is able to design such beautiful blogposts ? Link:http://www.quicksprout.com/the-advanced-guide-to-content-marketing-chapter-1/
Are there any tools i could use to create a similar user experience ?
That post looks more like an infographic. I haven’t created any yet myself, so I wouldn’t have any to recommend, but I know I’ve seen sites that help to create them, so they’re out there.
I just did ombre on my blog redesign and I am so happy with how it turned out! Thanks for all of the help and suggestions! http://lifeoutofthenest.com
Fabulous Lauren, it looks great and I love the colors in your ombre! I’m so glad you shared it with me!
Lauren, I love your ombre! How did you make it so big?
Robin, she used CSS instead of a background so it automatically stretches the gradient to the size of the browser window. The tutorial above shows you how to do this. 🙂
Hey i just found this site and its pretty amazing. Only thing is i have a blogger blog, not wordpress and ive been looking for how to create my own custom template from scratch.
Hi Mo, thank you for saying so, I appreciate that! You’ll find that most tutorials here are written for both WP and Blogger blogs.
Hello Marianne,
Ombre is love 🙂
This light shade texture is great to add up on our site.
The step by step tutorial by your side is very useful in setting up this one.
Looking forward to grab my hands upon this.
Thanks for the share.
Shantanu.
I’m so glad you enjoyed this Shantanu, I love ombre too!
Hi Marianne,
We can add a load of visual effects without using Photoshop to our website.
Gradient background is the best and many people apply it.
After reading your article one can easily add a gradient background without using Photoshop.
I will tweet your post.
Thanks a lot for sharing.
Thanks for sharing Manish!
Hello
Marianne,
Thanks for sharing lovely post. Really adding ombre background in our blog post makes it look pretty. I am also a graphic designer and love to make graphics. Here you share making ombre background without photoshop is amazing.
In this post you explained step by step and it is very easy to understand.
Best Wishes,
Praveen verma
I’m glad you appreciate it Praveen, thanks for stopping by!
Thank you for this awesome tip! Can I use this article on my website https://www.yourcitymarketingsolutions.com?
Thank You Marianne!
Hi Jesse, thank you! You’re welcome to summarize and link to it but I’d prefer to not have it reposted somewhere else in it’s entirety.
Hi Marianne,
Great post and tutorial. Gradients truly look awesome on a lot of websites, and it probably a new trend – http://merehead.com/blog/gradients-new-design-trends/
This is definitely interesting. I really want to know these little CSS tricks for it can help design my blog and salespages.
great Ivan, thanks for sharing with me 🙂
This is amazing. Thanks for referring the gradient tool to us. Now, I can use this even for designing sales funnels.