Gradients CSS

Gradients

Images showing a smooth dissolve from one color to another are plastered all over the web.

However, CSS 3 allows you to place them in your designs without having to create an actual image file.

There is no special property for this; you simply use the background or background-image property and define your gradient in its value. You can create both linear and radial gradients this way.

Linear gradients

For an even spread of two colors, fading from one at the top to another at the bottom, a declaration can simply be something like:

background: linear-gradient(orange, red);

To manipulate the angle of the fading, you slot in “to” and the destination you want the transition to head to. You can head to one side:

background: linear-gradient(to right, orange, red);

Or one corner:

background: linear-gradient(to bottom right, orange, red);

Or any angle that tickles your fancy:

background: linear-gradient(20deg, orange, red);

Note that the “to” is excluded with angles because there isn’t an explicit destination.

And why stop at two colors? Specify as many as you dare:

background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));

To get gradients to work on as many browsers as possible, you will probably also want to use -webkit-linear-gradient to cover Safari and older versions of Chrome. The values of these must also exclude the “to” part, if used.
CSS gradients won’t play at all with IE 9 and below, but you can still make them, and any other incapable browser, use the traditional method of a good old fashioned image by specifying that first, as a fallback (proceeding declarations will just be ignored).
So, all-in, your gradients might look something like this:

body {
    background: #666 url(fade.png) 0 0 repeat-y;
    background: -webkit-linear-gradient(right, #000, #666); 
    background: linear-gradient(to right, #000, #666);
}

Radial gradients

Radial gradients, with one color starting from a central point and fading to another color, use a similar syntax:

background: radial-gradient(yellow, green);

You can also specify the shape of the fade. By default it is an ellipse, spreading to fill the background box, but you can force it to be circular, regardless of the shape of the box:

background: radial-gradient(circle, yellow, green);

Using “closest-side”, “closest-corner”, “farthest-side” and “farthest-corner” you can also specify if the gradient is contained by the sides or corners of the box nearest to or furthest away from the origin:

background: radial-gradient(circle closest-side, yellow, green);

And if you wanted to place the origin of the gradient somewhere specific, you can also use “at”:

background: radial-gradient(at top left, yellow, green);

More compatibility notes: additional -webkit-radial-gradient usage is wise. The order of the parameters needs to be changed here, and, like “to”, “at” is excluded. So:

background: radial-gradient(circle closest-side at 100px 200px , black, white);

Would be accompanied by:

background: -webkit-radial-gradient(100px 200px, circle closest-side, black, white);

Color stops

If you don’t want a uniform blend across your gradient, you can specify exactly where in the gradient each color kicks in, straight after each color, starting at “0” and ending at “100%” (although lengths can also be used).
So, just to make it clear before tinkering:

• linear-gradient(black 0, white 100%) is the equivalent of linear-gradient(black, white)
• radial-gradient(#06c 0, #fc0 50%, #039 100%) is the same as radial-gradient(#06c, #fc0, #039)
• linear-gradient(red 0%, green 33.3%, blue 66.7%, black 100%) will have the same result as linear-gradient(red, green, blue, black)

That’s because, when the positions are stated in these examples, they evenly space out the colors, which is the default when no color stops are explicitly defined.
So, to get on with that tinkering, you can pull and stretch away with those stops:

background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);

Repeating gradients

A single gradient will fill a box with the previous methods but you can use “repeating-linear-gradient” and “repeating-linear-gradient” to build on the color stops and, well, repeat the gradient.
For basic bars of black-and-white bars, for example:

background: repeating-linear-gradient(white, black 10px, white 20px);

Or something a bit more solid:

background: repeating-radial-gradient(#8b2, #8b2 10px, #e90 10px, #e90 20px);

+

HTML Color Codes

With HTML color codes you can set the color of web site background, color of text, cells in tables and much more.

Using HTML color codes for web site background color:

<body style="background:#80BFFF">

Using HTML color codes for setting font/text color:

<span style="color:#80BFFF">

Using HTML color codes for table background color:

<table style="background:#80BFFF"

Using HTML color code for link color:

<a style="color:#80BFFF">

Primary/Main/Basic Colors
000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

+

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages

and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content, such as semantically insignificant tables that were widely used to format pages before consistent CSS rendering was available in all major browsers. CSS makes it possible to separate presentation instructions from the HTML content in a separate file or style section of the HTML file. For each matching HTML element, it provides a list of formatting instructions. For example, a CSS rule might specify that "all heading 1 elements should be bold," leaving pure semantic HTML markup that asserts "this text is a level 1 heading" without formatting code such as a <bold> tag indicating how such text should be displayed.

This separation of formatting and content makes it possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to display the web page differently depending on the screen size or device on which it is being viewed. While the author of a web page typically links to a CSS file within the markup file, readers can specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author has specified. If the author or the reader did not link the document to a style sheet, the default style of the browser will be applied.

The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.

+