blog/content/articles/2008-04-15-webkit-team-introduced-css-based-gradients.md

---
title: WebKit team introduces CSS-based gradients
author: Matthias Kretschmann

date: 2008-04-15 17:36:34+00:00

tags:
  - design
  - development
  - css
---

![WebKit](../media/webkit.png)

Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team:

<!-- more -->

> WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.

Take a look at [the entry on Surfin' Safari to learn how those css-based gradients work and how they can be coded](http://webkit.org/blog/175/introducing-css-gradients/):

> So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.
>
> You can use gradients in the following places:
> background-image
> border-image
> list-style-image
> content property

Although the WebKit team is saying it is supported "now" [a commenter on Surfin' Safari states](http://webkit.org/blog/175/introducing-css-gradients/#comment-24343) that it seems the whole function isn't included in the latest nightly builds of WebKit.

So it will take some time, 'til it's worth replacing the gradient images on my h3 and h4 headlines with just simple css code...
-												start with content edits

											
										
										
											2013-11-18 23:54:59 +01:00
+								---
 								title: WebKit team introduces CSS-based gradients
-												all the remaining post edits

											
										
										
											2013-12-09 23:29:19 +01:00
+								author: Matthias Kretschmann
 								date: 2008-04-15 17:36:34+00:00
-												categories & tags

											
										
										
											2018-07-19 02:22:01 +02:00
-												post metadata updates

											
										
										
											2016-05-02 01:40:32 +02:00
+								tags:
-												formatting

											
										
										
											2019-05-12 16:37:44 +02:00
+								  - design
-												use development tag

											
										
										
											2020-05-10 22:57:00 +02:00
+								  - development
-												formatting

											
										
										
											2019-05-12 16:37:44 +02:00
+								  - css
-												start with content edits

											
										
										
											2013-11-18 23:54:59 +01:00
+								---
-												post tweaks

											
										
										
											2018-08-08 22:26:42 +02:00
+								![WebKit](../media/webkit.png)
 								Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team:
 								<!-- more -->
-												start with content edits

											
										
										
											2013-11-18 23:54:59 +01:00
 								> WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.
 								Take a look at [the entry on Surfin' Safari to learn how those css-based gradients work and how they can be coded](http://webkit.org/blog/175/introducing-css-gradients/):
 								> So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.
-												post metadata updates

											
										
										
											2016-05-02 01:40:32 +02:00
+								>
-												start with content edits

											
										
										
											2013-11-18 23:54:59 +01:00
+								> You can use gradients in the following places:
 								> background-image
-												all the remaining post edits

											
										
										
											2013-12-09 23:29:19 +01:00
+								> border-image
 								> list-style-image
 								> content property
-												start with content edits

											
										
										
											2013-11-18 23:54:59 +01:00
 								Although the WebKit team is saying it is supported "now" [a commenter on Surfin' Safari states](http://webkit.org/blog/175/introducing-css-gradients/#comment-24343) that it seems the whole function isn't included in the latest nightly builds of WebKit.
 								So it will take some time, 'til it's worth replacing the gradient images on my h3 and h4 headlines with just simple css code...