In the past, if you wanted to have an HTML entity to have a gradient background you created in image of a gradient and displayed it in the entity using the background-image attribute in CSS. With the evolution of browsers and CSS/HTML, this is no longer the case. In this tutorial we will learn how to use CSS to add a linear gradient to the background of entities. The Setup First, we need to decide how we are going to use the gradient. Linear CSS Gradients that ANY Browser Can See | Web Design Dev
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
GradientFinder - Convert your Images into CSS Gradients About: Gradient Finder is an entirely in browser way to convert an image to its CSS gradient. You can also generate CSS gradients and make changes to the files you choose! It was written by Aaron Marasco and Brian Grinstead It was (partially) inspired by pngtocss. The main things that are different about GradientFinder is that it accepts more image types than pngs, it accepts arbitrary angles, and it can run in your browser!