Shop Mobile More Submit  Join Login

PE: CSS3 101 - Color Gradients

Tue May 28, 2013, 3:40 PM
PE 2010 stamp by projecteducate





Table of Contents:


This article contains two major topics of Gradients:


1. Linear-Gradient :dalogo:



2. Radial-Gradient :dalogo:



Supported by:


:iconfirefoxplz:
Firefox 16+
:icongooglechrome:
Chrome 26+
:iconsafariplz:
Safari 5.1+
:iconinternetexplorerplz:
Internet Explorer 10+
:iconoperaplz:
Opera 12.1+


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! :dummy: Don't you think?
Good, 'cause now this is where things get a little complicated :noes:



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 pikadudeno1 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! :#1:

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! :heart:



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 or 10px 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 or 10px 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:
:iconcss-dyk: :iconecssited:
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

Default Blue by im-not-sana Dark Space by im-not-sana
If you have one as well, let me know and I'll add it here




#ProjectEducate presents CSS3 101 - Color Gradients compiled by `im-not-sana.
This Article discusses Linear Gradients and Radial Gradients with their variations and provides examples.

CSS3 101 Topics:
May 27th - Introduction
May 28th - Color Gradients
May 30th - Pseudo-elements & Pseudo-classes
May 31st - Transition Animations
June 2nd - Conclusion
Add a Comment:
 
:iconsulaman:
sulaman Featured By Owner Oct 1, 2013
Hi, 

Have made a similar website, based on CSS3. 


Hope this may help you.


Reply
:iconpikadudeno1:
pikadudeno1 Featured By Owner May 31, 2013  Hobbyist Digital Artist
Oh, and in case it wasn't clear from my previous comment, don't use "to" with angles.
Reply
:iconpikadudeno1:
pikadudeno1 Featured By Owner May 31, 2013  Hobbyist Digital Artist
The direction parameter information is missing two key points:

1. The CSS standard changed, so you should now be using "to <named direction>", which indicates where the direction is going (just like with angles), instead of where it starts. dA will correct the to-less form for you, but it doesn't hurt to make a habit of doing it the correct way.

2. You can actually combine two direction keywords, e.g. "to bottom right". This produces the angle where the middle of the gradient connects the two neighboring corners, e.g. the bottom-left and top-right corners. Since that'll only produce a perfectly diagonal gradient for square boxes, you'll still want to know angles like 135deg for some cases.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 31, 2013  Hobbyist General Artist
That's true :nod: Both well noted points and will revise my article with the correct syntax. I had actually started writing this article about a year ago and didn't double-check the syntax but thanks for pointing it out :)
Reply
:iconkittylyn-donut:
Kittylyn-Donut Featured By Owner May 30, 2013  Hobbyist General Artist
thank you very much! that was pretty clear :3
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
That's a relief! :phew:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 29, 2013
Wonderful article! Thanks for all the great info~ :aww:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
Thanks dear! :love:
Reply
:iconnoru-kinz:
Noru-kinz Featured By Owner May 29, 2013  Student Digital Artist
.....I clicked this since it was at the bottom, now I am just extremely confused......

ALL I KNOW IS THAT THOSE ARE SOME PRETTY COLORS UP THERE!!!!! :D
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
Hah didn't expect it to show up in the footer ^^;

Well, if you like having fancy journal skins on your dA page, this is basically just a tutorial explaining some codes to help you design it :)

You could try reading the Intro blog to help you understand [link]
Reply
:iconnoru-kinz:
Noru-kinz Featured By Owner May 30, 2013  Student Digital Artist
Nah, I just liked the pictures, I have no use for this! Nice job though, it's sure to help many people XD
Reply
:iconjonarific:
jonarific Featured By Owner May 29, 2013   Interface Designer
Great article! :thumbsup: As this doesn't primarily focus on dA, I'd emphasize the importance of vendor prefixes even more though, as it's (unfortunately still) impossible to get along without them.

Also, you could perhaps insert a link to my article about alternate color models for people who are unfamiliar with all the rgba shenanigans. ;)
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
That's true :nod: I did mention it in the beginning and meant to add them as I went along but sort of had to rush it :paranoid: Will be revising the article now that I have some time :)

Ugh I KNEW someone wrote about it, but the #CSS-DYK Archive hasn't been updated so I couldn't find it in time -_- Thanks for the direct link, will add it now :thumbsup:
Reply
:iconiamoret:
iAmoret Featured By Owner May 29, 2013  Hobbyist Photographer
Non-premium members can indeed use journal skins- so long as they don't submit from Sta.sh. :facepalm: Learned that the hard way. :no:

I have tried using gradients before for buttons, but it didn't turn out so well. ^^;

WHERE DID YOU FIND THAT LAST GIF!? :stare: I spent a whole HOUR trying to find a .gif that said that for the end of one of my journals! :faint:

Well, anyway, I tried making a button, so here it is.... I don't really know anything about rgba, so I didn't use it. :shrug:

Sorry for the novel. ^^;
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
Ah yeah, I should've mentioned that crucial point :noes:

Haha it took me a while to find that one :D You can use it from now on ;)

Don't worry hex works just fine :) But here's an online Color Converter you might find useful [link] I'll probably do an rgba() tutorial at some point..

Your button looks great! :aww: Just one syntax error to correct: Under .button:hover{ the last color needs to be 6 characters to work for hex.. guess it got deleted somehow :giggle:

Also for buttons, it's better to add the HTML in <a href="link" class="button">BUTTON</a> format so you can easily add links to it. For this, don't forget to add text-decoration: none;

Oh don't be silly, you're telling ME about novels.. :paranoid:
Reply
:iconiamoret:
iAmoret Featured By Owner May 29, 2013  Hobbyist Photographer
It's okay- all the non-premium Sta.sh users will forgive you.... eventually. :giggle:

Yay! :dummy:

You have given me the key to an unknown world! :iconoohshinyplz:

....But it is six characters.... :confused: You need to expand the sidebar to see the last 2, though (or, at least, I do). ;)

Aah, yes; buttons are sort of useless without links, aren't they? :D

Yup- Teachin' you all 'bout that book-readin'! :icondafuqijustreadplz:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
Oh geez, I'll go add that point in my article now :noes:
Haha, use it wisely young grasshopper!:iconwoooplz:

Oops my bad, I mean under .button:active{ the last hex color is #13310 ^^; because when I click the button, it doesn't show any difference

Haha that icon :lol: But no seriously, have you seen the length of this article :| The rest are just as long too :faint:
Reply
:iconiamoret:
iAmoret Featured By Owner May 29, 2013  Hobbyist Photographer
Run! :icontaerunplz:

I shall try. :meditate:

Oooooh, I forgot a 3. ^^; Now that I know what I meant.... daaaang, I need to choose different colours! :stare:

Thank you. :bow: helpplz.info- saves lives, bro. :iconcoolstorybroplz:
Well, those are articles- this is a comment. :iconohnoyoudirintplz:
Reply
:iconphoenixleo:
phoenixleo Featured By Owner May 29, 2013
Oooh god someone just released all the plagues of Egypt and mummies...
o____________________________________O
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
:lol: whaaa?
Reply
:iconphoenixleo:
phoenixleo Featured By Owner Jun 5, 2013
Things I don't understand that is... :C
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 6, 2013  Hobbyist General Artist
Aww :petting: well, if you're ever interested in the basics of CSS, there's groups like #eCSSited and #CSS-DYK that will help you there :D or you could ask me :dummy: but until you have the basics, I don't think this Article will make any sense :saddummy:
Reply
:iconphoenixleo:
phoenixleo Featured By Owner Jun 6, 2013
'tis alright. I am sometimes checking back the group, yours, and others articles, and even outside links to see what CSS does in basic form. I am the newbie of the newbie :iconinthecornerplz:
It just reminds me of math for some reason. D:
Reply
:icongee-x:
Gee-X Featured By Owner May 29, 2013  Hobbyist Digital Artist
those gifs :B ....i love them :giggle:

this journal is awesome (like Barney :lol:). it's helpful + funny :thumbsup:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
:lol: are you comparing me to that purple child-hugging monster? :XD:

:icondemonicbarneyplz: "YOU LOVE ME" :music: *sings in creepy voice*

Glad you enjoyed it :#1:
Reply
:icongee-x:
Gee-X Featured By Owner May 29, 2013  Hobbyist Digital Artist
lol :lmao: no-no I meant Barney...Barney Stinson

:iconbarney-stinsonplz:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 31, 2013  Hobbyist General Artist
:rofl: Oops my bad :'D

Nahh no one can compare to him, he's LEGEND.. wait for it.. DARY :iconneilpatrickharrisplz:
Reply
:icongee-x:
Gee-X Featured By Owner May 31, 2013  Hobbyist Digital Artist
:icontruestoryplz:
Reply
:iconastrikos:
Astrikos Featured By Owner May 29, 2013   General Artist
Amazing article is amazing!
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
Awesome Ali is awesome :heart:
Reply
:iconastrikos:
Astrikos Featured By Owner May 29, 2013   General Artist
Super Sana is Super!
Reply
:iconpiratelotus-stock:
PirateLotus-Stock Featured By Owner May 29, 2013
Thank youuuuu :heart:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
My pleaaaaasure :icongollumplz:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
:iconsmeagolplz: DINNER TIMESES
Reply
:iconpiratelotus-stock:
PirateLotus-Stock Featured By Owner May 29, 2013
D:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 29, 2013  Hobbyist General Artist
I thought radial gradient didn't work on deviantART. I'll have to go and retry. It has been a while since I tested it.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
Nope it doesn't. After Angled Gradients I said that this is where it stops for dA :B
Reply
:icongillianivy:
GillianIvy Featured By Owner May 29, 2013  Hobbyist General Artist
Oops, sorry, I skimmed too fast. I am lazy some times :dummy:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
No worries a lot of people are :p and since you mentioned it, I changed the layout to add that information in the table of contents :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 29, 2013  Hobbyist General Artist
I am lazier when I think it is stuff I already know... :paranoid: But the radials caught my eye ;D
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 31, 2013  Hobbyist General Artist
You should totally try radial face example in your journal and see if its available for Alphas yet :eager:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 31, 2013  Hobbyist General Artist
Oh yea, it was a long time ago I tried it, whenever the linear gradient was first allowed.
Reply
:iconcaringheartttr:
CaringheartTTR Featured By Owner May 28, 2013  Hobbyist General Artist
:aww::wow:, that's so cool to read and very interesting to see how the effects turned out.

You made laugh with the rabbit falling of its chair poor guy.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
:giggle: It could happen to anyone!

and thanks a lot! If anyone's like me (needs visual examples to learn) then I'm glad it helps :)
Reply
:iconcaringheartttr:
CaringheartTTR Featured By Owner May 29, 2013  Hobbyist General Artist
True it could happen to anyone. It probably would happen sooner to someone without armrests :giggle:.

You're very welcome :).
I sure helps :). Pleased to hear your glad it helps :).
Reply
:iconmiontre:
miontre Featured By Owner May 28, 2013  Hobbyist Photographer
Excellent article! Can't wait for more :)
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
:eager:

I wrote these in a rush so do let me know if I miss anything or make a mistake :paranoid:
Reply
:iconnesmaty:
Nesmaty Featured By Owner May 28, 2013
Very useful, .. I have always been lazy to use gradients in my skins .. Now I'm quite interested .. :B
Reply
Add a Comment:
 
×

:iconim-not-sana: More from im-not-sana


Featured in Collections

CSS Tips by poserfan

css tutorials by MelikeBAt

CSS - HTML - help by kuschelirmel-stock


More from DeviantArt



Details

Submitted on
May 28, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
7,155 (1 today)
Favourites
115 (who?)
Comments
58
×