I think there is no doubt among all the people that do the web design that the third version of CSS (CSS3) that has brought a revolution in many ways, new selectors, new properties, events … have also improved the performance and loading speed of many websites.
And the gradients are one of them. Do you remember what we had to do before to have a two-colour gradient as a background on our website? We used images as background-image. Images, having information of the colour, were heavy, with the call to the server and the download of a few (many) extras kbs. It was not good for the user experience.
CSS3 arrived with its gradients, which allows us to apply a gradient using a single (or several lines if we need compatibility between browsers.) It is fast and above all very light: we tell the colours to the browser and it is responsible itself for generating the corresponding gradient transition between colours. Great. Now we have the tools to layout our gradient design.
How to create a gradient using the CSS background property
In this demo we created a series of blocks with different gradients and colours that we combined well with great typefaces. Feel free to inspect the code and download the files to use in your project 😉
Straight to the point…the CSS required to generate a gradient is relatively short. We need some data: a minimum of two colours and an address. From yellow to orange, from left to right. This would be the simplest case:
background: -webkit-linear-gradient(90deg, yellow 10%, orange 90%);
background: -moz-linear-gradient(90deg, yellow 10%, orange 90%);
background: -ms-linear-gradient(90deg, yellow 10%, orange 90%);
background: -o-linear-gradient(90deg, yellow 10%, orange 90%);
background: linear-gradient(90deg, yellow 10%, orange 90%);
It is simple and fast. We apply to the background property a linear gradient with a directivity of 90 degrees (left to right) between two colours, yellow and orange. You may notice that both colours have a value in %. That indicates at what time of the gradient they are applied. The yellow colour will begin to degrade from 10% width to orange, which will be fully orange when the width of the container reaches 90%.
The 5 lines are not necessary (there are to ensure compatibility between older browsers.) The important thing is that the last one applied is the rule without prefixes.
More colours and diagonals. We can give a little more complexity by adding more colours, changing the inclination and even the type of gradient. Besides the linear-gradient we have the radial-gradient, which we will go from the center to the ends. And if we play more, we also have repeating-linear-gradient and repeating-radial-gradient.
Gradient limit is your imagination. If you want some inspiration, I recommend you stop by and inspect the demo code or download the code directly.
The HTML would look like this for a couple of sections:
<section class="section_item flex-container color-2">
<h1 class="flex-item">Watermelon</h1>
<p class="flex-item">From #e74d6b to #8cc8ac and Cupcake ipsum dolor sit amet. Topping biscuit jelly beans chocolate danish powder dessert. Donut candy chocolate bar. Jelly bear claw cotton candy apple pie muffin lemon drops.</p>
</section>
<section class="section_item flex-container color-3">
<h1 class="flex-item">Pinapple</h1>
<p class="flex-item">From #65997d to #fccb6e and Cupcake ipsum dolor sit amet. Topping biscuit jelly beans chocolate danish powder dessert. Donut candy chocolate bar. Jelly bear claw cotton candy apple pie muffin lemon drops.</p>
</section>
And the CSS:
.section_item {
height: auto;
max-width: calc(100vw - 30px);
margin: 15px;
padding: 10vw;
z-index: 1;
position: relative;
text-align: center;
}
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.section_item p {
font-size: 18px;
font-size: 1rem;
color: #fff;
max-width: 700px;
line-height: 1.5;
}
/* Background colors */
.color-2 {
background: -webkit-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
background: -moz-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
background: -ms-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
background: -o-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
background: linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
}
.color-3 {
background: -webkit-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
background: -moz-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
background: -ms-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
background: -o-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
background: linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
}
CSS gradients generators
As we have seen, create a gradient is very easy and simple. But if you still want something more visual and simple, you can always go to gradients generators. My advice is that whenever you use any of these tools, you review the code before deploying it in your design, if any element needs to be polished or clean.
Some good examples are: CSSmatic and ColorZilla.
But there is also a very good resource, especially if you are on a prototyping and mockups phase and you need a quick and uncomplicated code: uiGradients is a library of CSS gradients ready to copy and use.
The decision to include a gradient in design must always be justified
Like all new things, we risk falling into the trap of using them all meaningless. Before introducing an element defined as a gradient in your design, ask you the following questions: Is it necessary? Does it improve somewhat the design or does it do just the opposite? Does it affect the readability of the texts?
Introducing a gradient in a project should not be a decision of the web designer took at the last moment. It is something that has to be thought from the previous phases as it has to bring something to the project. It would be nice to reread this article on the application of gradients in design and colour psychology.
Similarly, a gradient profiles much the style of our website. Therefore think about the whole concept of it (flat design, material design and others…) and think whether it is really worth. And if the answer is yes, go ahead, you know how!
Good luck 😉
