Contact me
Reinhard von der Waydbrink
call +49.172.3979063
twitter xing linkedin

7synth Radial and Linear Gradient - Documentation

A website, beautiful and fast loading is always a contrast. Smooth colored gradients with CSS can help, but not all Browser and not one library support this. With the "gradient.js" from 7synth you can have full and easy support for radial and linear gradients in InternetExplorer (IE), Firefox, Chrome, Safari, Opera and more... .

Free Download.

Download the JavaScript for free and start designing your webprojects today.

Keep me up to date with news, software updates, and the latest information on products and services. Downloadbutton opens pop-up.

Your email:

Mirror 1 (7synth) (strikt download)
Mirror 2 (Bauhaus University Weimar)(strikt download)

One Solution. All browsers.

Index
Credits
  • Developed by: Reinhard von der Waydbrink
  • Published on: 7synth.com/
  • Release: Build 4
  • License: Free
Preamble and supported Browser

All Browser apply filters for visual effects, but everyone got it's own syntax. Since over 10 years InternetExplorer (IE) support linear and radial gradients, but nobody try to deal with it. These InternetExplorer filter-effects were fully supported with CSS and if you would like, you can manipulate them with scripting some JavaScript. While this only works in InternetExplorer webdesigners had to use images as gradients and it took five years, that Opera came up with the first Scalable Vector Graphic support, which allow us to produce gradients with vectors. In 2007/08 Google Chrome and Apple Safari both allows gradients with the webkit-filter. While the w3c Consortium try to set a standart, Mozilla's Firefox came up in 2008 with it's own syntax for gradients. Now we have more solutions than browsers. The gradients will all look the same, but they are all different made.

Browsersupport History:

Plattform:

Our provided technique works on Mac, Windows-PC and Linux, and on any mobile Device (regular smartphones, ipad, ipod touch, iphone)

InternetExplorer - DirectX Transform (Trident)

InternetExplorer does not support gradients with the new CSS3 or SVG. But since 1997, Microsoft's developer try to establish their own visual "filter". One Filter is Alpha(), which we will misuse for our radial gradients and the other is Gradient(), which we will use for our linear gradients.

Alpha will let a background-color fade to transparent in different styles.

Radial

For the Radial Gradient we have to create a div-elements. This element is a Overlay for the background. Than we'll use the Alpha-Filter. Alpha will make this element transparent in a special style. style=2 is a radial alpha. This means that the center of the element will be full colored (opacity=100) and the opacity will lose to the edges (finishopacity=0).

existingElement.style.backgroundColor=outerColor;

createdElement.style.backgroundColor=innerColor;
createdElement.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2)';
While the Alpha()-filters width and height adjust to the element, which ofter aren't quadric, the generated elements have to be quadric to get a circular gradient.

Linear

The linear gradient is pretty simple. It colors go from startColorStr to endColorStr. While it got no colorStop we have to put this Gradient onto a element with a defined width or height, which represent the colorStop. The GradientType allows two directions. "0" is for vertical gradient, "1" for horizontal gradients.

existingElement.style.backgroundColor=outerColor;

createdElement.style.width=colorStop 
//or 
createdElement.style.height=colorStop;

createdElement.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr=innerColor, endColorstr=outerColor)';

Element2 have to be created with JavaScript and appended to the parentNode element1.


Mozilla Firefox - CSS3 (Gecko)

Mozilla do a real CSS gradient, but it uses its own syntax. However, you'll need a height for the HTML or BODY-tag. If the content of the website does not fill out the complete body, the background-gradient will repeat in the height of the content.

Radial

-moz-radial-gradient(position,gradienttype,innerColor [colorStop],outerColor [colorStop])
  • position = Center of Spot
  • gradienttype = Form of Gradient (elippse/circle)
  • innerColor = Color in the center
  • outerColor = outer color
  • [colorStop] = Position color is reached

Linear

-moz-linear-gradient(direction, innerColor, outerColor colorStop)

Examples

body{
  height:100%;
  background:-moz-radial-gradient(center, circle ,#50504b,#1b1b1a 700px);}
body{
  height:100%;
  background:-moz-linear-gradient(top, #50504b,#1b1b1a 700px);}
Chrome/Safari - CSS3 (Webkit)

Chrome and Safari do a real CSS gradient, but they use the webkit syntax.

Radial

-webkit-gradient(gradienttype, position1, colorStop1, position2, colorStop2, innerColor, outerColor);
  • gradienttype = "radial"
  • position1 = Position of innerColor (left,center,right,top,center,bottom)
  • colorStop1 = Radius of innerColor(Number)
  • position2 = Position of outerColor (left,center,right,top,center,bottom)
  • colorStop2 = Radius of outerColor(Number)
  • innerColor = Color in the center
  • outerColor = Color at the outside

Linear

-webkit-gradient(gradienttype, direction, color-stop(position, innerColor), color-stop(position, outerColor));
  • gradienttype = "linear"
  • direction = Startpoint (Endpoint is the opposite of the window)
  • colorStop(position, innerColor) = ..(position of innerColor, innerColor)
  • colorStop(postion, outerColor) = ..(position of outerColor, outerColor)

Examples:


body{background:-webkit-gradient(radial, 
	center center, 0, 
	center center, 700, 
	from(#ff00ff), to(#550055));
     }

body{background:-webkit-gradient(linear, 
	top left, 
        colorStop(0,#ff00ff),
        colorStop(700,#550055));
    }
Opera - SVG (Presto)

Opera is the final frontier in design and radial gradient especially. But nonetheless there is a solution. In the following i will show you the many steps we have to take, but In the end i provide you a simple Javascript. For a short explanation, we first have to construct a radial gradient in a Scalable Vector Grafic (SVG). This SVG-text have to be transformed into a base64 encoded string. Than, this base64-string and it's MIME-Type have to be attached as a background-image-url with the data-Method. Why I attached it as a background-image? Sure, you could simply attach a SVG-text to img,iframe,object or embedtag, but Opera make too much problems with that. That's it.

Radial

A SVG with a radial gradient in a rectangle look like this (I highlighted the things my Javascript will automaticly change). Diameter is the colorStop*2. If you've never heard from SVG and wonder where the image is, the browser will transform the following text into a image:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="'+diameter+'px" height="'+diameter+'px">
	
	<title>SVG Opera Background Radial Gradient</title>
	<metadata>author: Reinhard v.d.Waydbrink</metadata>
	
	<defs>
		<radialGradient id="rg" cx="50%" cy="50%" r="100%">
			<stop stop-color="'+innerColor+'" offset="0%"></stop>
			<stop stop-color="'+outerColor+'" offset="50%"></stop>
		</radialGradient>
	</defs>
	
	<rect style="fill:url(#rg);" width="'+diameter+'px" height="'+diameter+'px"/>
 
</svg>

Linear

A SVG with a radial gradient in a rectangle look like this (I highlighted the things my Javascript will automaticly change).thewidth and theheight are the with and the height of the element.x1,y1 and x2,y2 are the start and endpoint of the gradient.


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="'+thewidth+'px" height="'+theheight+'px">
	
	<title>SVG Opera Background Linear Gradient</title>
	<metadata>author: Reinhard v.d.Waydbrink</metadata>
	
	<defs>
		<linearGradient id="lg" x="'+x1+'" y="'+y1+'" x2="'+x2+'" y2="'+y2+'">
			<stop stop-color="'+innerColor+'" offset="0%"></stop>
			<stop stop-color="'+outerColor+'" offset="100%"></stop>
		</linearGradient>
	</defs>

	<rect style="fill:url(#lg);" width="'+thewidth+'px" height="'+theheight+'px"/>

</svg>

Encoding Radial or Linear SVG:

Now we have the SVG-text, we have to encode all charakters into a base64 string. There are several online base64 encoder, but Mozilla got a simple function changing a string into base64. Opera can handle this function too. It's the function window.btoa(); .So we can encode on-the-fly. The Result is a string like "PHN2ZyB4bWxucz0iaHR0.....". This string can be attached as a background-image, when we place the mime-type(image/svg+xml;) and the encodingtype(base64,) in front of the string

var svg = '<svg> ... </svg> ';
var encodedData = window.btoa(svg);
existingElement.style.background='url("data:image/svg+xml;base64,'+encodedData+'");

Example with CSS

body{
    background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0.....");
}
Handle all Filters with one js

This example show us a full code of how you simplify radial and linear gradients with javascript. You shurely can add pure css for fallback if user do not support JavaScript. Possible issues: IE maybe adjust overflow and z-index . ALL: Set html{height:100%;} . Use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> and remember that this Doctype need px-endings in css.

<html>
<head>
<style>
 body{margin:0px;overflow:hidden;}
 #divbox{width: 400px; height: 200px;overflow:hidden;}
</style>

<script language="JavaScript" src="/gradient.js"></script>
<script type="text/javascript">
window.onload=function(){

  radialgradient(['body','#ff00ff','#550055','700','MC']);
  radialgradient(['divbox','#00ff00','#004400','200','MC']);
}
</script>

</head>
<body>

  <div id="divbox"></div>

</body>
</html>

The Javascript looks like this:

./gradient.js

The Javascript explanation for Radial Gradient:

radialgradient(['id','innerColor','outerColor','colorStop','position'])
  • id = id of element (body is reservated for bodytag)
  • innerColor = innerColor(Startcolor), e.g. #fff000 (Hex)
  • outerColor = outerColor(Endcolor), e.g. #555000 (Hex)
  • colorStop = position of Endcolor from Center (Number)
  • position = center of spot (2 letters from below)
Positions:
  • TL = Top Left
  • TC = Top Center
  • TR = Top Right
  • ML = Middle Left
  • MC = Middle Center
  • MR = Middle Right
  • BL = Bottom Left
  • BC = Bottom Center
  • BR = Bottom Right
The Javascript explanation for Radial Gradient:
lineargradient(['id','innerColor','outerColor','colorStop','position'])
  • id = id of element (body is reservated for bodytag)
  • innerColor = innerColor(Startcolor), e.g. #fff000 (Hex)
  • outerColor = outerColor(Endcolor), e.g. #555000 (Hex)
  • colorStop = position of Endcolor from Center (Number)
  • position = start of gradient (T,L,R or B look below)
Positions:
  • T = Top
  • L = Left
  • R = Right
  • B = Bottom
-end-
Impressum - Legal Info