Table of Contents:
This article contains two major topics of Gradients:
1. Linear-Gradient
2. Radial-Gradient
Supported by:
What are Gradients?
A color gradient, in terms of computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a different color at different positions produces smooth color transitions in between the different ranges.
A linear color gradient is specified by different points with a color at each point. Colors along the path through those points are calculated and then extended across to fill the region.
Fig. 1 - Linear Gradient
A radial color gradient is specified as a circle that has one color in the center and another at the corners. Colors are calculated based on the distance from the center.
Fig. 2 - Radial Gradient
However with CSS3, instead of uploading gradient images to your webpage as you can see in Figures 1 & 2, you can just code the gradient right in. Since I'm more of a Visual Learner myself, I'm just going to go right ahead and start teaching as I go along with examples.
Linear-Gradients
The first topic of CSS3 I'd like to cover is one that's already available to *PremiumMembers in Journal Skins. By the way, there's a BlackBerry promotion going on, so Non Premium Members can use Journal skins from this page me.deviantart.com/journal/?edi… and test these features out as well
Vertical Gradients
This type refers to the gradient changing from top to bottom. This is the default gradient we'll see when entering the basic syntax:
linear-gradient(color, color);
CSS
/* W3C Standard that works in dA */
.box {
width: 200px;
height: 200px;
background: linear-gradient(#000000, #ffffff);
}
HTML
/* The same HTML class I'll be using throughout Linear Gradients */
<div class="box"></div>
OUTPUT
Fig. 3
Note: To use Linear-Gradients on webpages other than dA, it's preferred to add the following syntax for full Browser Compatibility
.box {
background: #000000;
background: linear-gradient(#000000, #ffffff);
/* Firefox 3.6+ */
background: -moz-linear-gradient(#000000, #ffffff);
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#000000, #ffffff);
/* Opera 11.10 */
background: -o-linear-gradient(#000000, #ffffff);
}
Note: To be as backward compatible as possible on browsers, it's best to first specify a default background color
background: #000000;
What if we want to add more colors vertically?
Well then go ahead and add as many as you want and it will evenly distribute the positions of these colors!
linear-gradient(color, color, color, etc.);
.box {
background: linear-gradient(maroon, red, orange, yellow, green, blue, purple, pink, #FFFFFF);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 4
Note: For some reason, dA won't allow you to use ALL color names (ex:
red, blue
) in linear-gradients so I had to insert a hex value of white (ex: #FFFFFF
= white) at the end. I'm only using names here so that beginners can follow easily, but it's better to use hex values or rgba (ex: rgba(255, 255, 255, 1)
= white) If you DO want to use the names make sure you enter at least one hex value wherever.Well that was easy enough! Don't you think?
Good, 'cause now this is where things get a little complicated
What if I want to control the position of where the colors stop?
For that the syntax will change a bit.
linear-gradient(color position, color position, etc.);
Where the position is calculated in percentages. The position is usually considered as the color stop because that's where it will stop and the new gradient will start.
.box {
background: linear-gradient(#FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 5
In Fig. 5 you can see that white is opaque until 30% of the box and that's where it stops and starts to change its gradient from gray until it reaches black at 100% which is at the bottom of the box.
What if I want to control the direction of the vertical gradient?
Again, you'll need to add a bit more to the syntax:
linear-gradient(to direction, color stop, color stop, etc.);
The direction can either be starting from
top
or bottom
depending on you!Note: The syntax for linear-gradients has changed for the direction, where "to direction" used to just be to "direction" ex:
to bottom
used to be bottom
. This only works in old browsers with prefixes and dA will change the syntax for you, but it's better to use the new syntax. Thanks to PixievoltNo1 for pointing it out!.box {
background: linear-gradient(to bottom, #FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 6
Challenge!
Now we can take what we've learned and apply it to create a 3D looking button!
Hover here and hold Click!
Fig. 7
As you can see, the gradients change when hovered on, and clicked on. In the snippet below, you can see that the gradient becomes lighter in opacity when hovered on, and changes from top to bottom when clicked on. This, along with some other attributes such as box-shadow, creates a nice 3D effect.
HTML
<a href="" class="button">3D Button!</a>
CSS
.button {
background: #B73E62;
background: linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}
.button:hover {
background: linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5));
}
.button:active {
background: linear-gradient(to bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}
Try it out yourself here!
Horizontal Gradients
This type of gradient refers to the colors changing from left to right or vice versa.
linear-gradient(to direction, color, color, etc.);
Where direction is either
left
or right
Of course, you can always add the position in percentages to better suit your needs.
.box {
background: linear-gradient(to left, #FFFFFF 0%, black 20%, white 40%, black 60%, white 80%, black 100%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 8
Diagonal Gradients
You can achieve this in two ways, with angles or direction:
linear-gradient(to direction direction, color stop, color stop, etc);
linear-gradient(angle, color stop, color stop, etc.);
The angle starts at
0deg
same as to bottom
↑Then goes clockwise to
45deg
starting from bottom left to top right ↗ same as to top right
At
135deg
it starts from top left to bottom right ↘ same as to bottom right
At
225deg
it starts from top right to bottom left ↙ same as to bottom left
At
315deg
it starts from bottom right to top left ↖ same as to top left
.box {
background: linear-gradient(45deg, yellow, orange, pink, #ffffff);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 9
Angled Gradients
Of course, you can get creative with the different degrees of angles and positions and do your own style of gradient.
.box {
background: linear-gradient(20deg, magenta 20%, red 60%, #ffffff 80%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 10
Still awake?
Well sadly, this is where Color Gradients ends in regards to deviantART.
But read on, if you're still interested to use them on your own webpages!
Repeating-Linear-Gradient
This does exactly what the title says, repeats the gradients so you can create a sort of pattern. Imagine the endless possibilities! You can completely replace background images with this.
div {
background: repeating-linear-gradient(black, black 20px, white 20px, white 40px);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 11 - Click to see Live Preview
Note: You can test the rest of these gradient attributes in the Image Links provided. Copy the code, press Reset and start from there.
Radial-Gradient
This is a gradient created in circles, automatically starting from the center to the edges
radial-gradient(color, color);
div {
background: radial-gradient(black, white);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 12 - Click to see Live Preview
What if I want to add more colors at different positions?
As with linear gradients, you can add more colors and change position of the radial gradients as well with the following syntax
radial-gradient(color stop, color stop, etc.);
I just created a simple flag of Japan for the example below, but you can get creative with this!
div {
background: radial-gradient(red, red 40%, white 40%, white 80%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 13 - Click to see Live Preview
Note: The first color will automatically be positioned at 0% which is the center of the circle. But you can also change where you want it to start by specifying a percentage
What if I want a specific size?
If you want a circular size the syntax will be like this:
radial-gradient(sizepx, color stop, color stop);
If you want an oval shape the syntax will be like this:
radial-gradient(widthpx heightpx, color stop, color stop);
In the following example, I made an oval shape that looks like a face with a blue background. With this CSS3 feature, you can easily create shapes and images using radial and linear gradients!
div {
background: radial-gradient(100px 150px, pink, pink 50%, cyan 50%, cyan 100%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 14 - Click to see Live Preview
Challenge!
Try to create this face using extra div classes with use of positioning and sizes.
Fig. 15 - Click to work on Template
Repeating-Radial-Gradient
This creates a repeated pattern of radial gradients with the same syntax
repeating-radial-gradient(color stop, color stop);
div {
background: repeating-radial-gradient(black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 16 - Click to see Live Preview
Cool Effects by Specifying a Size!
You can also add sizes to this as well to create some cool fractal type effects with the syntax
repeating-radial-gradient(size, color stop, color stop);
div {
background: repeating-radial-gradient(10px, black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}
OUTPUT
Fig. 17 - Click to see Live Preview
And that's all there is to it! Link me to any interesting gradient styles you come up with through this tutorial on cssdesk.com and leave a comment if you have anymore inquiries! Thanks for reading and hope you found this useful and easy to follow!
TL;DR - Documentation
linear-gradient(to direction, color stop, color stop);
linear-gradient(angle, color stop, color stop);
direction:top
bottom
left
right
angle:45deg ↗
135deg ↘
225deg ↙
315deg ↖
color:white
#FFFFFF
rgb(255,255,255)
rgba(255,255,255,1)
position:0%
-100%
repeating-linear-gradient(size, color stop, color stop);
size:10px
or10px 10px
etc.
color:white
#FFFFFF
rgb(255,255,255)
rgba(255,255,255,1)
position:0%
-100%
radial-gradient(width height, color stop, color stop);
width:10px
etc.
height:10px
etc.
color:white
#FFFFFF
rgb(255,255,255)
rgba(255,255,255,1)
position:0%
-100%
repeating-radial-gradient(size, color stop, color stop);
size:10px
or10px 10px
etc.
color:white
#FFFFFF
rgb(255,255,255)
rgba(255,255,255,1)
position:0%
-100%
Vendor Prefixes
You should take note to use the following prefixes in front of each CSS style property for full Browser Compatibility on non-dA webpages:
Android: -webkit-
Chrome: -webkit-
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-
Example:
If you want to add a Linear Gradient:linear-gradient(black, white);
You should add these:
background:
black;
/* Default color for really old devices */background:
linear-gradient(black, white);
/* W3C Standard */ background:
-webkit-
linear-gradient(black, white); /* Chrome, Android, iOs, Safari */background:
-moz-
linear-gradient(black, white); /* Firefox */background:
-ms-
linear-gradient(black, white); /* Internet Explorer */background:
-o-
linear-gradient(black, white); /* Opera */Useful Links
If you'd like to learn more about CSS basics, I suggest you have a look at these groups:Create your own Journal Skin by miontre
Ultimate CSS Gradient Generator
Linear-Gradients by jonarific
Learn more about rgba() and Alternate Color Models by jonarific
Examples of Journal Skins using Linear Gradients
If you have one as well, let me know and I'll add it here