CSS Gradient is a Designstripe project that lets you create free gradient backgrounds for your website. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram. Why we made this? See gradients were super played out back in the early web days, but now they’re so ubiquitous that you’d be remiss not to drop them in your site, interface, or next hair dye job. Also, I’m part of a group of makers with a mission to build a better internet, one digital project at a time. One of our recent project launches is Cool Backgrounds another free design tool to generate background wallpaper for websites, blogs and phones. What’s the foundation for beautiful gradients? Gorgeous shades of color, of course! Our color shades pages curate a selection of popular colors, whether you're looking for that wonderful soft baby blue or hyper lime green, check out the shades pages. Don’t have enough time to make your own gradients? Looking for a supply of popular gradients you can use for your projects? Our swatch collection features a curated selection of gorgeous gradients and color combinations free for you to use however you’d like. Each swatch comes with the basic code you’ll need to implement it on your own website. If you need a little inspiration before getting started on your own, our gradient examples page is the best place to go. Sometimes all you need is a little push—a source to jumpstart your creativity, and a couple gradient examples could do just that for you. From Stripe to Scale API, browse the examples to give you that jumpstart you need to start making fresh gradients on your own. Interested in learning how to use blended colors? Our blog exposes the details of everything gradients and even has some in-depth references for you to look at as you learn how to code these elements yourself. Browse through our references, tutorials, and articles for more information all about gradients. Is the basic information not enough for you? Want to learn more about the inner-workings of gradients and everything to do with them? We’ve gathered some killer resources to help you become a gradient expert, and they’re all available for you here on our resources page. If you’re the kind of person who is always seeking more knowledge, this is the page for you. What is a gradient? Gradients are CSS elements of the image data type that show a transition between two or more colors. These transitions are shown as either linear or radial. Because they are of the image data type, gradients can be used anywhere an image might be. The most popular use for gradients would be in a background element. To put it more relevantly, gradients are part of an extremely popular design trend that has been gaining popularity over the last several years. It seems that they have always been around in the background (no pun intended); although, some sources claim that the trend is “coming back.” Of course, it’s hard for something to come back if it never left, but we’ll chalk that up to semantics. Gradients allow you—the designer—to explore new opportunities to provide fresh, clean designs for your audience. The added transition between colors allows you to play with two-dimensional and seemingly three-dimensional aspects, taking your designs from boring to extraordinary with some simple code.

In fact, the best thing about gradient code is that it can be as simple or as complex as you’d like to make it. You can do the bare minimum and let the browser figure out the rest, or you can take things into your own hands and identify all the odds and ends. You could even do a little extra if you wanted and explore the endless possibilities of gradients. Linear Gradients Transitions in linear gradients occur along a straight line determined by an angle or direction. A CSS linear gradient can be coded by using the linear-gradient() function and can be as simple or complex as you would like. At the very least, you’ll only need two colors to get started. From there, you could add more colors, angles, directions, and more to customize your gradient even further. If you leave the code at its most basic styling, the other elements will be determined automatically by the browser. This includes the direction or angle and color-stop positions. For more customized styling, you can specify these values to create fun gradients with multiple colors or angled directions. Playing with color-stop positions could also leave you with a solid pattern instead of a traditional gradient. The possibilities are endless! Compared to radial gradients, linear gradients are certainly more popular in design and branding techniques. For example, you may have noticed the popular music-streaming company, Spotify, and their gradient branding recently. Linear gradients are, perhaps, the easiest way to incorporate this trend into your creations, as they seem to blend smoothly with other design elements. Radial Gradients A CSS radial gradient —although far less often seen—is just as beautiful and fun as a linear gradient and can be implemented just as easily. With that said, the code may seem more difficult to figure out at first. It is for this reason that, for some designers, it may be easier to start out with a linear gradient. Of course, the code isn’t actually all that complicated at all. In fact, most of the code is exactly the same as that of the linear gradient—with just a few tweaks for extra radial customization. For example, unlike with linear gradients, you can actually adjust the size of radial gradients in place of where the direction would normally go. Playing with the different values that determine these sizes can give you a lot of different results. While radial gradients may not be as popular as their linear counterparts, it’s possible that you might have seen them more often than you think. Special CSS techniques can leave you with designs that may be unrecognizable when it comes to the typical idea of what a linear or radial gradient may look like. In the end, radial gradients are just as powerful to use and can give your designs an extra kick of something special. CSS Gradient Text 16 Super Fire CSS Gradient Examples Linear Gradient CSS How to create a gradient background