How would I make a two tone gradient like this using only CSS3…
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’ve created a jsfiddle example for you: http://jsfiddle.net/PTcVt/ (tried to get approximately the same colours as you, but you may need to tweak it a bit to get it perfect)
It is done using a solid background colour, combined with a white, semi-transparent ‘gradient’ to overlay half of it. The ‘gradient’ doesn’t even need to change colours; it just serves as an overlay for the solid background colour.
Like this:
.myblock {
background-color: #0ae;
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
The CSS3Pie site also has some good examples of what can be achieved: http://css3pie.com/demos/gradient-patterns/
(also, if you’re not aware, CSS3Pie itself, from the site above, is a great little javascript hack for adding support for CSS gradients (and more) to older versions of IE)