Advertisement
Gradients play an essential role in web design, especially cool gradient backgrounds.
There are many different possibilities of gradients that you can use, such as linear or radial. You can use a wide variety of shades and colors to add interest and depth.
Gradients are very important to making your website unique and attractive. No matter how you choose to do your gradients, it will make your website stand out amongst all the other websites.
Consider using the CSS gradients instead of a background image, because using a background image can be difficult. Even though it is difficult, it can still be done while you are integrating responsive design in your CSS.
The use of gradients has greatly increased among website designers in the last few years. This is because it has never been easier to use the CSS3 styling attributes. This allows almost anyone to be able to add gradients to their website.
Gradients also provide a great visual appeal to your site. However, it is important to remember to use your gradients within reason and not go too overboard with their use.
In this article you will see a showcase of websites who use gradients in their website design, mostly in their background. Some of these sites use CSS3 gradients while other simply apply them to an image. If you’ve ever thought of using this effect on one of the websites that you are working on, this is the inspiration that you need.
Resources
Besides the actual inspiration, I thought it would be helpful to you to have a few resources for this interesting effect, to save you some time searching for these.
UI Gradients
CSS Gradient Generator
The coveted CSS3 Gradient Generator has undergone a redesign and moved to its new home within the CSS3 Factory. It has maintained all of it’s tools and functions but looks even better now. The redesign enhances the generator’s usability and I will be adding even more advanced functions soon.
CSS3 Gradient Backgrounds
Colorful Gradients
Gradients automatically created by a computer. 48 times daily. A Will Burn project.
Inspiration
July, July
July, July is the portfolio of Anders Hede Jensen. The web is an ever expanding canvas and the need for an online profile is greater than ever. If he can help his clients solve their problems and help them succeed online, while at the same time getting an opportunity to expand this canvas even further, then count him in!
Dynamic Yield
Dynamic Yield’s advanced machine learning engine builds actionable customer segments in real time, enabling marketers to increase revenue via personalization, recommendations, automatic optimization & 1:1 messaging.
Mélanie F
Slippers inspired by the “grown-ups” loafers, will bring your children the confidence to walk and keep their head up! Who said that fashion should only be for Mom and Dad? Melanie F’s slippers, are entirely hand made.
Stripe
Stripe is a set of tools for building and running an internet business. They help businesses accept payments from anyone, anywhere, and build new kinds of companies like Lyft or Kickstarter.
Internally, they say their goal is to increase the GDP of the internet. They want to bring more businesses online worldwide.
They’re building a company with folks from all sorts of backgrounds, who make great coworkers and who share and exemplify a few core values: people who are humble, respectful, inclusive, and ready to roll up their sleeves and get important work done for their users.
Lab19 Digital
They build beautiful web products on tried and tested platforms, so you’re free to focus on your business while they handle the technicalities.
Pushh
Pushh is a free iPhone app that helps you keep track of your fitness selfies. It’s a simple and easy app to take better selfies to track your physical transformation, together with some basic info like weight and body fat. Your selfies are neatly organized in a timeline and you can easily share your Before & After shots or create a progress video.
Monodraw
Plain text has been around for decades and it’s here to stay. Monodraw allows you to easily create text-based art (like diagrams, layouts, flow charts) and visually represent algorithms, data structures, binary formats and more. Because it’s all just text, it can be easily embedded almost anywhere. Of course, exporting as images is also supported (PNG and SVG).