As the head of development for an agency, I’m constantly looking for ways to improve user experience and engagement rooted in exceptional design for our clients. Web development technique and design possibilities are constantly evolving and have made significant shifts since the early days of web colors and gradients.
As the head of development for an agency, I’m constantly looking for ways to improve user experience and engagement rooted in exceptional design for our clients. Web development technique and design possibilities are constantly evolving and have made significant shifts since the early days of web colors and gradients.
The increasing adoption of retina displays, OLED smartphone screens, 4K and even 8K resolutions have forced a shift towards code-generated graphics in place of pixel images, whenever possible. This move improves load times and performance for websites and online applications since it uses mathematical figures and code compiled by the web browser in milliseconds.
The main advantage in using code-generated graphics like SVG and CSS filters, aside from speed, is that they are vector based, scale infinitely and will look sharp on any type of screen.
In this article we will discuss the CSS gradient filter and provide tips on how to use it most effectively.
There are 3 types of basic gradient transitions that CSS can produce: linear-gradients, radial-gradients & conic-gradients. Linear gradients follow a straight line at any angle in 360 degrees. Radial gradients follow a circular shape radiating from a central point. Conical gradients create color transitions rotated around a center point.
TIP 1 Subtle transitions
Using subtle gradient transitions are a great way to increase interest and create drama on an otherwise static web page or section. In some use cases CSS background gradients can be essential.
On the mobile version of this immunology website, buttons were required to have a solid white background with dark grey on hover.
In the absence of a stroke border or box-shadow to outline the button, we were concerned it could get completely lost on the solid white background.
By using a subtle 90-degree linear gradient we were able to keep the semi-transparent body model the focus of the page and make the background dark enough towards the bottom to emphasize the white buttons.
Here, subtlety was really key; a harsh, obvious gradient background would have certainly ruined the aesthetic and impacted the user experience of the page.
See how this might work for your brand on https://mycolor.space/gradient.php.
First, visit the site above and choose your intended primary background color from your brand’s color palette and enter it into the following tool:
Next, Choose a color that is only slightly different from your original hex value and click Generate:
The tool will take care of the rest.
My favorite feature of mycolor.space is that it generates hex color values using the “background-image” property that are in between the two colors you have chosen, creating an ultra smooth and subtle transition.
This can be used in modern UI, section backgrounds and so much more. We use this tool all the time in place of solid colors to create a dramatic look and feel.
Free subtle gradient transition examples
Feel free to use some of the following subtle gradients we’ve generated using the mycolor.space tool.
//Rare Steakbackground-image: linear-gradient(to right top, #af0917, #bc161b, #c9201f, #d72924, #e43228);
//Dusk Skybackground-image: linear-gradient(to right bottom, #0963af, #0860a9, #075ca4, #06599e, #055699);
//New Cyborgbackground-image: linear-gradient(to right bottom, #ffffff, #fcfafc, #f9f6f8, #f8f1f3, #f6ecec);
//Old Campfirebackground-image: linear-gradient(to right bottom, #777777, #706d71, #6b6368, #67595d, #635050);
TIP 2 Using gradients with text
By using the -webkit-background-clip CSS property you can use any CSS gradient within text! This can be done subtly or with great dramatic effect. Gradient text can be used for any number of things; brand logos, hero statements, and coming soon landing pages to name a few. Try using a subtle gradient transition within heading copy or a blog article pull-quote to create added interest.
<div class="text-wrapper">
<h2>COMING SOON</h2>
</div>
<style>
.text-wrapper {
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: #222;
}
.text-wrapper h2 {
font-weight: 800;
background: radial-gradient(circle farthest-corner at center center,#e9e9e9,#222) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
TIP 3 Stacking Radial Gradients
This is an interesting technique that uses a series of radial gradients on top of each other within the same background property. With this technique you can make an interesting abstract background color or create a unique background aesthetic for online applications and user experiences. This type of stacked gradient can be seen in many online streaming services from Hulu to Spotify to HBOMax:
Free stacked radial gradient example:
.toxic-sunset {
background:
radial-gradient(farthest-side at top left,
rgba(174,255,216,.75),transparent),
radial-gradient(farthest-side at bottom left,
rgba(255,200,80,.75),transparent), radial-gradient(farthest-corner at bottom right,
rgba(231,111,81,.75),transparent) #003b44 //box background;
}
Now that you’ve learned a bit more about CSS gradients, and why they are so useful, keep your eye out for them in the services you already use on a daily basis. You’ll find them in logos, advertisements, fortune-500 websites, mobile apps and streaming services. Because they are code-based they add little to no loading time and their effect can be quite dramatic.
Stay tuned for more articles about code-generated graphics and how you can add interest to your brand’s projects without compromising performance.