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 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? Remember:
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 7000+ others and get instant access now!