Gradients Are the Latest Trend in Web Design
Gradients are a great design feature that will make your website and online store stand out even more.
Gradients have always been a familiar feature in graphic design and photography. They add interest or a three-dimensional fee to the background of an image, depending on what colors you choose.
In this sense, gradients are transitions between two or more colors based on hue, saturation, and brightness.
You can have linear gradients or radial gradients.
Linear gradient
Radial gradient
Since web browsers have supported gradients for several years, they are increasingly used in web design and built into some of Shopify's paid third-party themes, such as Impact. That's great news because it doesn't require you to write CSS code to add a gradient to the background of your website, a section, or a button.
However, few themes support creating gradients directly from the Shopify theme editor.
The Squarespace editor doesn't currently support setting up gradients.
So, what do you do in this case?
Load a Picture Showing a Gradient
This option uses a gradient picture as a background image.
Draw a picture with a gradient in Adobe Illustrator or Adobe Photoshop;
Export the picture as JPEG or PNG;
Create a section with a background image on your page;
Add the gradient picture to the image background.
This approach generally works very well. Its main advantage is that most templates and editors allow you to have a page or section background image.
But using gradient images instead of the built-in browser capabilities seems a bit crude.
Create a Gradient Using CSS
If you use Shopify 2.0 or are familiar with Squarespace Custom CSS, you can add the necessary code for your browser to render a gradient as long as you know the exact HTML element to which you want to apply the gradient.
Here is a gradient going from left to right. The optional percentage parameter after each color determines the stop position:
background: linear-gradient(to right, green 0%, blue 100%);
You can also define a specific angle:
background: linear-gradient(180deg, green, blue);
Or you can specify more than one color:
background: linear-gradient(180deg, green, blue, yellow);
Or you use the hexadecimal values for the colors:
background: linear-gradient(180deg, #00ff00, #0000ff, #ffff00);
Create a Gradient With a Gradient Generator
If you want to make your life a little bit easier, you can also use a web-based gradient generator, such as coolors.co, and copy the CSS code to your site.
background: hsla(23, 41%, 9%, 1); background: linear-gradient(90deg, hsla(23, 41%, 9%, 1) 0%, hsla(18, 16%, 53%, 1) 100%); background: -moz-linear-gradient(90deg, hsla(23, 41%, 9%, 1) 0%, hsla(18, 16%, 53%, 1) 100%); background: -webkit-linear-gradient(90deg, hsla(23, 41%, 9%, 1) 0%, hsla(18, 16%, 53%, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#1F140D", endColorstr="#9B8074", GradientType=1 );
As you can see, their code ensures compatibility with the main browsers, Chrome, Mozilla Firefox, Webkit Safari, and Microsoft Edge.
Specify the Exact HTML-Element
When you add this code to Custom CSS, make sure you specify the exact HTML-element you are targeting. That's especially important for Squarespace as you add Custom CSS to the entire site.
If you want to add a gradient only to a particular page in Squarespace, you need to insert it in the Page Header (page settings > Advanced > Page Header Code Injection).
As you add HTML to the <head> section of your page, you have to wrap the CSS code in a style element <style>...</style>.
<style>
#id {
background: linear-gradient(180deg, green, blue);
}
</style>Gradients are a great design feature that will make your website and online store stand out even more.
Enjoy tinkering with them.
