linear gradient for safari

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

linear-gradient()

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image> .

The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side ( left or right ), and the other the vertical side ( top or bottom ). The order of the side keywords does not matter. If unspecified, it defaults to to bottom .

The values to top , to bottom , to left , and to right are equivalent to the angles 0deg , 180deg , 270deg , and 90deg , respectively. The other values are translated into an angle.

The gradient line's angle of direction. A value of 0deg is equivalent to to top ; increasing values rotate clockwise from there.

A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).

An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients .

Description

As with any gradient, a linear gradient has no intrinsic dimensions ; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

To create a linear gradient that repeats to fill its container, use the repeating-linear-gradient() function instead.

Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.

Composition of a linear gradient

A linear gradient is defined by an axis—the gradient line —and two or more color-stop points . Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.

The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The starting point is the location on the gradient line where the first color begins. The ending point is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called magic corners : the corners nearest to the starting and ending points have the same color as their respective starting or ending points.

Customizing Gradients

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using a <length> or a <percentage> . If you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

By default, colors transition smoothly from the color at one color-stop to the color at the subsequent color-stop, with the midpoint between the colors being the halfway point between the color transition. You can move this midpoint to any position between two color-stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however, the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

If two or more color-stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

Color-stops should be listed in ascending order. Subsequent color-stops of lower value will override the value of the previous color-stop creating a hard transition. The following changes from red to yellow at the 40% mark, and then transitions from yellow to blue over 25% of the gradient:

Multi-position color-stops are allowed. A color can be declared as two adjacent color-stops by including both positions in the CSS declaration. The following three gradients are equivalent:

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

Formal syntax

Gradient at a 45-degree angle, gradient that starts at 60% of the gradient line, interpolation in rectangular color space, interpolating with hue.

In this example for interpolation, hsl color system is being used and hue is being interpolated.

The box on the top uses shorter interpolation , meaning color goes straight from red to blue using the shorter arc on color wheel . The box on the bottom uses longer interpolation , meaning the color goes from red to blue using the longer arc, traversing through greens, yellows, and oranges.

Gradient with multi-position color-stops

This example uses multi-position color-stops, with adjacent colors having the same color-stop value, creating a striped effect.

More linear-gradient examples

Please see using CSS gradients for more examples.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Using CSS gradients
• Other gradient functions: repeating-linear-gradient() , radial-gradient() , repeating-radial-gradient() , conic-gradient() , repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• CSS images module

CSS Gradients

Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance.

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let’s go through it all.

Gradients are background-image

While declaring the a solid color uses background-color property in CSS, gradients use background-image . This comes in useful in a few ways which we’ll get into later. The shorthand background property will know what you mean if you declare one or the other.

Linear Gradient

Perhaps the most common and useful type of gradient is the linear-gradient() . The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose.

Not declaring an angle will assume top-to-bottom:

Those comma-separated colors can type of color you normally use: Hex, named colors , rgba , hsla , etc.

To make it left-to-right, you pass an additional parameter at the beginning of the linear-gradient() function starting with the word “to”, indicating the direction, like “to right”:

This “to” syntax works for corners as well. For instance, if you wanted the axis of the gradient to start at the bottom left corner and go to the top right corner, you could say “to top right”:

If that box was square, the angle of that gradient would have been 45°, but since it’s not, it isn’t. If you wanted to make sure it was 45°, you could declare that:

You aren’t limited to just two colors either. In fact you can have as many comma-separated colors as you want. Here’s four:

You can also declare where you want any particular color to “start”. Those are called “color-stops”. Say you wanted yellow to take up the majority of the space, but red only a little bit in the beginning, you could make the yellow color-stop pretty early:

We tend to think of gradients as fading colors, but if you have two color stops that are the same, you can make a solid color instantly change to another solid color. This can be useful for declaring a full-height background that simulates columns.

Browser Support / Prefixes

So far we’ve only looked at the new syntax, but CSS gradients have been around for quite a while. Browser support is good. Where it gets tricky is syntax and prefixing. There are three different syntaxes that browsers have supported. This isn’t what they are officially called, but you can think of it like:

• Old: original WebKit-only way, with stuff like from() and color-stop()
• Tweener: old angle system, e.g. “left”
• New: new angle system, e.g. “to right”

And then prefixing as well.

Let’s try a chart:

There is some overlap in there. For instance when a browser supports the New syntax they probably also support the older syntaxes as well, including the prefix. Best practice is: if it supports New, use New.

So if you wanted to absolute deepest possible browser support, a linear gradient might look like this:

That’s an awful lot of code there. Doing it by hand would be error-prone and a lot of work. Autoprefixer does a good job with it, allowing you to trim that amount of code back as you decide what browsers to support.

The Compass mixin can do SVG data URI’s for IE 9 if that’s important to you.

To complicate things just a little more , the way degrees work in the OLD vs NEW syntax is a bit different. The OLD (and TWEENER – usually prefixed) way defines 0deg and left-to-right and proceeds counter-clockwise , while the NEW (usually unprefixed) way defines 0deg as bottom-to-top and proceeds clockwise .

OLD (or TWEENER) = (450 – new) % 360

or even simpler:

NEW = 90 – OLD OLD = 90 – NEW

OLD linear-gradient(135deg, red, blue) NEW linear-gradient(315deg, red, blue)

Internet Explorer (IE) 6-9, while they don’t support the CSS gradient syntax, do offer a programmatic way to do background gradients

There are some considerations here on deciding to use this or not:

• filter is generally considered a bad practice for performance,
• background-image overrides filter, so if you need to use that for a fallback, filters are out. If a solid color is an acceptable fallback ( background-color ), filter is a possibility

Even though filters only work with hex values, you can still get alpha transparency by prefacing the hex value with the amount of transparency from 00 (0%) to FF (100%). Example:

rgba(92,47,90,1) == #FF5C2F5A rgba(92,47,90,0) == #005C2F5A

Radial Gradients

Radial gradient differ from linear in that they start at a single point and emanate outwards. Gradients are often used to simulate a lighting, which as we know isn’t always straight, so they can be useful to make a gradient seem even more natural.

The default is for the first color to start in the ( center center ) of the element and fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction.

You can see how that gradient makes an elliptical shape, since the element is not a square. That is the default ( ellipse , as the first parameter), but if we say we want a circle we can force it to be so:

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. If we needed that circle to be entirely within the element, we could ensure that by specifying we want the fade to end by the “closest-side” as a space-separated value from the shape, like:

The possible values there are: closest-corner , closest-side , farthest-corner , farthest-side . You can think of it like: “I want this radial gradient to fade from the center point to the __________, and everywhere else fills in to accommodate that.”

A radial gradient doesn’t have to start at the default center either, you can specify a certain point by using “at ______” as part of the first parameter, like:

I’ll make it more obvious here by making the example a square and adjusting a color-stop:

Browser support for radial gradients is largely the same as linear-gradient() , except a very old version of Opera, right when they started supporting gradients, only did linear and not radial.

But similar to linear, radial-gradient() has gone through some syntax changes. There is, again: “Old”, “Tweener”, and “New”.

The hallmarks being:

• Old: Prefixed with -webkit- , stuff like from() and color-stop()
• Tweener: First param was location of center. That will completely break now in browsers that support new syntax unprefixed, so make sure any tweener syntax is prefixed.
• New: Verbose first param, like “circle closest-corner at top right”

Again, I’d let Autoprefixer handle this. You write in the newest syntax, it does fallbacks. Radial gradients are more mind-bending than linear, so I’d recommend attempting to just get comfortable with the newest syntax and going with that (and if necessary, forget what you know about older syntaxes).

Conic Gradients

A conic gradient is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle.

They’re called “conic” because they tend to look like the shape of a cone that is being viewed from above. Well, at least when there is a distinct angle provided and the contrast between the color values is great enough to tell a difference.

The conic gradient syntax is easier to understand in plain English:

Make a conic-gradient that is located at [some point] that starts with [one color] at some angle and ends with [another color] at [some angle]

At it’s most basic level, it looks like this:

…where it is assumed that the location of the gradient starts at the very center of the element ( 50% 50% ) and is evenly distributed between white and black color values.

We could have written this in several other ways, all of which are valid:

If we do not specify an angle for the colors, then it is assumed that the gradient is evenly divided between the colors, starting at 0deg and ending at 360deg . That kind of creates a hard stop where the colors bump right up to one another at 0deg and 360deg . If our starting color would begin somewhere else on the circle, say one quarter of the way at 90deg , then that creates a smoother gradient and we start to get that cool cone-looking perspective.

We can have fun with conic gradients. For exmaple, we can use it to create the same sort of pattern you might see in a color picker or the infamous Mac spinning beach ball indicator:

Or, let’s try a simple pie chart by adding hard stops between three color values:

Unfortunately, conic-gradient has no browser support at the time of this writing. It’s currently part of the CSS Image and Replaced Content Module Level 4 specification, which is in working draft. In the meantime, Lea Verou (who has contributed to the spec) provides a polyfill that makes them possible.

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Repeating gradients.

With ever-so-slightly less browser support are repeating gradients. They come in both linear and radial varieties.

There is a trick, with non-repeating gradients, to create the gradient in such a way that if it was a little tiny rectangle, it would line up with other little tiny rectangle versions of itself to create a repeating pattern. So essentially create that gradient and set the background-size to make that little tiny rectangle. That made it easy to make stripes, which you could then rotate or whatever.

With repeating-linear-gradient(), you don’t have to resort to that trickery. The size of the gradient is determined by the final color stop . If that’s at 20px, the size of the gradient (which then repeats) is a 20px by 20px square.

Same with radial:

Improper Fallback Loading

As we’ve covered, some really old browsers don’t support any CSS gradient syntax at all. If you need a fallback that is still a gradient, an image (.jpg / .png) could do the trick. The scary part with that is that some slightly-less-old browsers, that were just starting to support CSS gradients, would load the fallback image. As in, make the HTTP request for the image even though it would render the CSS gradient.

Firefox 3.5.8 did this ( see screenshot ), as well as Chrome 5- and Safari 5.0.1. See:

The good news is this isn’t really any issue anymore. The only offending browsers were Chrome and Safari and Chrome hasn’t done it since 6 and Safari hasn’t done it as of 5.1, going on three years ago.

Additional Resources

• Snag a block of the CSS covering all prefixes/syntaxes from CSS3 Please!
• Can I Use on gradients
• Mozilla docs for linear gradients , repeating liner gradient , radial gradient , and repeating linear gradient .
• Gradients Gallery (you can do some crazy patterns with gradients)

FYI: Different syntax for different rending engines, “Rendering” is spelled wrong.

Great post! I really wish there were more browsers and users using CSS3.

Yes. It is definitely worth doing now. With server side scripting and a little JavaScript the possibility increases exponentially with CSS3.

Good to know.

Jeffrey Way did a great screencast using these not long ago here http://bit.ly/9zFMQR

Thanks for posting that link. The given information was really useful to me, same counts for the article here itself. I learned a lot

Great article Chris! Would definitely will give them a go!

Can’t we report (or ask?) Mozilla and Webkit to not request the fallback image? Something like a bug/feature request?

Shorter hand for Firefox if you don’t to get to fancy.

Where you can replace top with bottom, left, or right.

Great article! Webkit have a best syntax.

Nice writeup however the demo for the 180deg example is still showing 90deg in Safari 4.0.4. Also, if we don’t invite IE (trident) to this party because there are no performance gains then the same can be said for Safari/Webkit as it too loads the image. Furthermore, and I haven’t tested this yet, would using a conditional comment to target IE with its filter utilizing the !important override force the Trident engine to use the gradient instead of the image?

The problem with Trident is twofold:

• It loads the fallback image anyway

• If a fallback image is declared it uses that instead of the gradient filter

So yes, if you could figure a way to get it to at least use the gradient filter instead of the image, there would be an advantage (programmatic declaration of color) to using it. But as written in this article, there isn’t.

We can target IE (may be conditional comments or underscore hack) and set background to “none” and declare the filter. A bit more work but it means not loading the image which worth it.

Sorry! I didn’t see your last paragraph.

There is actually a proprietary IE filter to get gradients working in IE 5.5+. You just get a start and stop value though, not the fine grained control we have in webkit and mozilla

aaaaanndd i’m assuming that’s what you meant with “filter”.

I like the fallback image solution though, seems the most logical

Like Sean mentioned, there is a small typo in the demo code. It’s the 180-degree code that is wrong though. Webkit-browsers will show 90-degree gradient in both examples with the current code.

I believe the it should be:

background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#1a82f7), to(#2F2727)) !important;

or, in this case, easier to understand:

background-image: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)) !important;

Thanks for a interesting article!

Thanks I fixed that… it was just me messing with it changing stuff around as I was learning how to use it.

I’m gonna leave in the keywords version you suggested so there are examples of both ways.

Really useful to know and definitely worth implementing now. My problem with progressive enhancement to date has been that it’s only really practical for personal sites and blogs. Try explaining to a client that the beautiful gradients that he/she sees in the mock up will not actually be visible to a large proportion of the sites visitors. Now everybody sees the intended design without resorting to a conditional stylesheet.

CSS gradients are cool and sexy, but I’m not still convinced. If they weren’t declared via vendor specific syntax and their syntax was standarized, I would do the whole enhancement magic (like I do with rgba() and text-shadow). But now for me their code is too messy. Though the whole idea is just awesome.

I could not agree more. It’s weird how all the semantic, clean code aficionados are using these browser specific “css hacks”.

While I think it’s cool to stay progressive and try new things, it’s somewhat contradictory at the same time.

As of Safari 5 and Chrome 10 the syntax is standardised, and since users of these browsers are prompted heavily to update (or in Chrome’s case, updated automatically) it could be argued that we don’t need to provide the older Webkit syntax, just rely on the image fallback for the tiny minority that this would affect.

While I think this is awesome, I am getting a little tired of the fact that all of these things need 3 lines in the stylesheet to get them to work. This vendor specific syntax is annoying. And then to have to work around for IE garbage? Bah!

I’m with Mike above….when you have a client that uses an older browser and either can’t or won’t upgrade, you trying telling them that this looks awesome for others, but just ok for you.

Or, hey Mr. client, this looks great on the browser you are using, but for a lot of your visitors, some things will be missing or will look different.

Clients don’t want to hear that. They want it to be the same across the board. Progressive enhancement doesn’t mean a whole lot to them. To make it worse, the company I work for monitors what browsers our client’s visitors are using….and IE6 is STILL at about 25-30%.

I don’t think it’s useful. A serious web designer would use sprites anyway, so requests aren’t an issue here (if you have 8 gradients on your page, you’re probably not going to save 8 files if you have any idea what you’re doing) …

Not working on IE is an issue. Not working properly in webkit-based browsers (still making the request) is an issue.

I’ll stick to sprites. And most of my gradients have a lot of effects that I don’t think css can (for now) reproduce easily.

Sorry that I have to correct you Chris, but Firefox 3.6 does support radial gradients.

The syntax is fairly simple, instead of using -moz-linear-gradient you simply use -moz-radial-gradient.

Check out this article with more information: CSS Gradients in Firefox 3.6 You can also have a look at my Beautiful Photoshop-like Buttons with CSS3 Tutorial , which features radial gradients in Firefox.

Nice summary of CSS Gradients in any case, thanks!

Mozilla does support radial gradients, it’s just a different property: -moz-radial-gradient.

Check out the reference page on the Mozilla Developer’s Center

I’ll support CSS gradients when I only need one syntax, and no separate browser-declarations.

Currently you hint in the direction of damn ugly rectangle boxes with a gradient

as soon as the design requires more details this will become tricky i know that css3 will also have shadow’s and rounded corners and all, but we are still a long way from all these features working great together (with each other and with fallback images / colors)

so my oppinion would be “wait” since my boss will not agree with a site that does not look like the design (yes, to the pixel, and yes, in all major browsers including my worst enemy IE6).

I’m finding it pretty amazing how many people are against the idea of progressive enhancement, citing angry bosses and clients.

But remember…

In thise case, this isn’t “how it looks” progressive enhancement, this is “how it works” progressive enhancement. Because we can use fallbacks, the look will be the same here.

It’s little details like this that make modern web design so much fun. Being able to accomplish these things outside of photo shop will completely change how sites are designed>

Chris, I gave gradients a sincere try. Tried and tried, with all my might. I found that, in many cases, specifying for multiple browsers didn’t play nice with each other.

That is to say, specifying for both mozilla and webkit blew off one or the other. And throwing opera into the fray blew them ALL off. And throwing in the proposed W3 spec …well… nada.

I tried the specs in all orders (one first, the other first, etc.) I tried with ONE background statement, then with one each. No luck. So, I gave up and retreated to an image.

I’m a gradient fiend. I’d LOVE to use them via spec. Mebbe I’m doing something terribly wrong. But no luck yet.

Since CSS 3 support is still not that good, I would suggest different approach – using SVG for backgrounds with little Javascript (to support all mayor browsers).

Take a look at this article at AListApart.com: http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i/ .

Nice idea! I wouldn’t thought of that, beacuse I’m not used to working with svg. But I’ll give this approach a chance.

So, the question that remains is:

Why bother with fallbacks anyways?

If certain browsers do not support all aspects of CSS2 and are not beginning to support CSS3, then why should we cater to their users?

“But then things won’t look the same!”

I say, so what?

As designers and developers, I feel it is high time we abandoned trying to make everything look the same in every browser. As long as standards compliance and graceful degradation are taken into account, this should not be a problem. If certain elements do not display on certain browsers then those users do not get as rich of a user experience as others. As long as the site still works correctly, this does not matter.

Bravo…NOT. Why should you cater to their users? Because they’re the ones the website is for!

I love Progressive Enhancement (not Graceful Degredation) and really want/try to use CSS3 as much as possible but I will never make (for example) an IE7 user suffer a worse experience than a Chrome user for the sake of being cutting edge.

If one of my designers has created a great design then as far as I’m concerned as many people as possible deserve to have the opportunity to experience it.

And quite often the ‘gracefully degraded’ version looks shocking – take the rounded corners, gradient and shadow off a button and all you get is a box.

So now that little rant is over, thanks very much Chris! A very informative post!

I stand somewhere in the middle. Graceful degradation should be considered professionally. One should look at their target market/user base/budget and evaluate how much time should be spent making improvements for older browsers.

@Matt – believe me, you will hear about it from clients if you build a site that looks the way it’s supposed to in your browser and not theirs.

@Jonathan – I wouldn’t go so far as to say a use “suffers” from lack of design. I do agree sites should still be semi-attractive in older browsers, however, it’s perfectly acceptable with a limited budget to tell users with older browsers that if they upgrade they will be able to enjoy the “full” experience.

Good post Chris.

Great article Chris! I’m going to have to give this a go.

I’m sure most here have seen modernizr which detects what browsers support which html5 and css3 properties. This solves the problem of the fallback image, but introduces a 3.9 kb js file with the http request and client-side processing. I’m curious how others here feel about modernizr and if it is worth the request, size, and processing.

One of the things we want for modernizr 2.0 is a build system so you can only include the tests you want.

Until then i think it’s totally fine to use the detection technique that we use internally on your own.

And then again, 3.9k aint too huge. :)

Very exciting to hear about version 2.0! 3.9k is tiny IMO and I have been using it on all of my new sites. Was trying to find out what others thought that have used it or thought about using it.

Most likely if you are using CSS3 gradients then you are using other css3 features like border-radius, box-shadow, etc. which I would think more than justifies the js file. i am not an optimization expert yet, though.

I need to get off my ass and start using modernizr… I like everything about it.

When it comes to using some of these cooler CSS3 technologies in their early stages the other question you may want to ask is how well and fast does the browser render the CSS3.

If the CSS3 short cut takes longer than the actual image retrieval then we might as well grab the image.

As for the browser specific declarations something like http://lesscss.org/ would be ideal.

great thank you, I will definately start using CS3, does CSS3 have cross browser issues,

Found a nice interactive gradient generator here: http://gradients.glrzad.com/

http://westciv.com/tools/gradients/index.html

I really benefited from the list. Thanks for your sharing!

I recently used gradients for a site because of the advantage it creates visually since the gradient can stretch to match the height on say a background. Here’s the site:

http://www.bronzetouchwf.com/

Compare a short page to a long one or use control+mousewheel (works in Chrome on Windows) to zoom out (Document > Zoom to fix that).

It’s subtle but nice…compare to IE or another browser without gradients and you can see the difference.

Already using it. Spread the word!

I second the already using it

Chris good stuff as always thanks so much

I can get pretty lazy when it comes to having to load up PS even to create a simple image. CSS gradients are so much easier and I’m fine backing that up with a solid color for folks that can see the gradient.

Also, I wrote a little utility to display various web stats and I hate seeing image resources top the list of most http requests. I’m going through now and trimming image resources where I can. This certainly helps do that.

Just an odd note, but does the footer of this site look off in IE7 to anyone else?

nm….it is when you bring the window size in. Footer doesn’t move.

I just started to use the css gradients last month, after I saw a few Nettut articles about them.

So far, I’ve only used them for drop shadows on divs to add a bit of depth for people with Firefox, Chrome and Safari. I stay away from using them for elements that depend on them, though.

The question I ask myself: “Would the art suffer without it?” If the answer is ‘Yes,’ I use older, more reliable methods at the cost of page load speed.

Nice! Been holding off using CSS gradients with a fallback as most browsers I’d tested in downloaded the image anyway.

It’s only one browser and it’s only one http request, but it doesn’t take a lot of effort & will give performance increases

Very nice article. Definitely going to try this out.

i use right now js gradients, it works in all browsers with the same sintax, and is easy to me to make all lighter to load, using svg is agreat deal too, but don’t work on ie without a adobe plugin

Another way to look at them is that if you use subtle gradients in your site, the fallback can be no gradient at all, just a solid color. So the site won’t look good in IE8 and prior, FF3.5 and prior,Opera 9 and prior,etc. Any non-CSS3 (even partial) browser that doesn’t support the gradient rule will see a solid color. But very soon, IE9 will be out, and within perhaps a year and a half, this subtle gradient fallback of simply a solid color might be acceptable.

Great article chris. I’m going to work some css3 gradients into my next project

Great article! I spent much time on this a little while ago, wish I found your article earlier – it would have save me a lot of time.

For those who don’t want to spend to much time building their CSS gradients (like me), I created a little tool:

http://www.display-inline.fr/projects/css-gradient/

There’s also support for Opera gradients, using SVG background.

Hey Chris, nice write-up!

I’ll just add a new twist to it: What about embedding your gradient as data-URI right into your background-property? That would also save you bandwidth and works in all modern browsers (apart from…, IE of course).

In addition you could then apply IE’s filter, as IE won’t get the message with that “strange” background-property.

PS: Yes, IE knows the proprietary data-URI-equivalent of MHTML, but that’s buggy under IE7 on >=Vista…

thx for this article and especially the demo. whenever I have to make a gradient I go to your demo and copy the code. thats very useful!

It seems this fallback works not only with gradients, but with RGBA backgrounds too. E.g. when you want a semi-transparent background, you can use

Firefox 3.6 won’t download the background image.

Thanks for the great post.

FYI, I’ve seen a small typo on the “view demo” link on top, /examples/CSS3Gradient/ at that page you have same webkit properties for two gradients even though the gradients differ.

Great post! I learned a little more about CSS 3 gradients.

-webkit-gradient(linear, 0 0, 0 100, from(#0f82f7), to(#072727));

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f82f7), to(#072727));

gradient will not stretch.

You can use SVG for fallback as following: background-image:url('data:image/svg+xml,'); I.e. write usual SVG as data:url, you only need to replace „#“ with „%23“. Pros: you can modify gradients right in CSS. Cons: very large syntax.

Wrong code, the right one: background-image:url(‘data:image/svg+xml,<svg xmlns=”http://www.w3.org/2000/svg”><defs><linearGradient id=”g” x2=”0″ y2=”100%”><stop offset=”0″ stop-color=”%232F2727″/><stop offset=”100%” stop-color=”%231a82f7″/></linearGradient></defs><rect width=”100%” height=”100%” style=”fill:url(%23g)”/></svg>’);

I don’t get it. If an image isn’t supported, why would you add another image?

Thank you! You just saved me about thirteen months of trying to figure this out on my own!

CSS gradients are finally supported pretty well, thanks for the heads up.

Just one thing, Mozilla is not a rendering engine, it’s called Gecko.

Well then, to add to Sunny Singh’s comment, Opera is not a rendering engine, it’s called Presto (layout engine). =)

I’m using CSS3 Gradients, Opera, Safari and Mozilla supports them great..

I use a gradient generator, that generates moz and webkit gradient, and a filter for IE.. but still I delete the filter for IE, and go for images..

Yes, the CSS will get huge when I need to specify 3-4 backgrounds each time for same element.. But it’s not the same size as what the background image would be, and I write my code nice, so easy to update, I save the requests on the browsers that support it, and some traffic.. So why not use them, I’m just thinking..

If possible, I’ll never open photoshop when creating sites.. because I can code the graphics I need, and for fixing Chrome, and IE etc.. I take a lovely screenie on the site.. Starting slicing the graphics out in Preview in mac.. works great.. and then I optimize the images after so it works perfect :)

It’s my way to create websites.. and they’re kinda fast :)

If you include fallback images as data uri, all browsers will load it and skip css gradients. Adding !important to gradient declarations forces browsers to use it. In addition, in IE9 if you use IE filters and rounded corners it just doesnt work. IE9 wont clip background to the border. A simple workaround is to declare gradients for supported browsers and fallback image in IE condidional stylesheet. IE performance will suffer, but that’s just the price for using poor browser.

Another great tricks here.. the demo is good, hope to download the source code so I could test it right away.

I’ve recently started using CSS gradients and aside from the browser specific syntax ( http://www.colorzilla.com/gradient-editor/ helps a lot) they work great.

The biggest advantage over sprites is that they’re vertically scalable. Even IE6 works just fine with linear gradients, which is probably the most common use for them.

I’m using gradients on the menu for our website. I wanted to cut down image use to as little as possible using CSS3 techniques (many learned from you). The result for me is actually a website far more visually stimulating, satisfying and successful in its objectives then when I had the full blown power of Photoshop available to me. Not using images at all is arguably more restricting but then its implementation has almost forced me to create a more clean and functional design that isn’t overly cluttered with visual goodies.

Fallback wise, I’m sticking to solid color however.

Where did you find Opera 11.10?

Link in the footer of Opera.com

Here’s an interesting article I found on using SVG to get gradients to work in IE9 in a non ms-filter way

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

Haven’t tried it yet, don’t know how it affects HTTP requests, and may just add an unnecessary layer of complexity, but may be worth investigating?

I’m glad to see you didn’t use the IE9 SVG fix for using gradients. I believe an anternative (old-school) background image will do just fine.

Thats the right solution, thx and i also works for my new sites. I alway searched for and there was no solution in pagespeed.

i have been trying to make a gradient background work for a site i’ve been drafting… but i haven’t found much in the way of cross-browser support. http://www.denisebeaudet.com/new-index.html

for example: this works fine in FF4 on a mac and is *non-existent* for FF4 for Windows. annoying.

the other thing that is quite bothersome is the buggy aspect where if your browser window is set at something less than full-screen, and you then scroll to see what is “below the fold” (i.e. below the viewport bottom-margin), it reverts to the startcolor. very annoying and visually interruptive.

ideas? please?

using the correct code would probably help. you left out the new syntax for Chrome, you don’t really need the old syntax for Chrome(IMHO) because Chrome auto updates. you’re also using svg for opera, why? gradients are supported in opera.

Go back through this article and re-read everything, you’ll see your problems pretty quickly.

Well it will certainly speed up one’s site. But what about the compatibility issues. For IE we need to use the js code for getting the bg gradient.

Thank you for this article. I am using some gradients on my latest site. It works great. Sadly there are still people browsing with IE6 on my sites. But with only 3% I am one of the lucky guys.

Awesome!!! Thanks for the breakdown!

Really cool trick here I didn’t know how to do. I’m think I’m going to go ahead and give it a go on one of my sites.

Just a note: although you have dismissed IE, I can’t since 95% of our visitors use IE7-9. I have found that simple linear gradients ca be used as follows:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFAE5′, endColorstr=’#FFDB95′);

Hope this helps some users who must live in the real world.

The web just got a whole lot more colorful. I have a tool that will generate the css for any linear gradient – and create the gradient even on IE6 using a simple behavior file i wrote for IE.

Enjoy (see the link in my contact info)! Ron

Great resource and tips for gradients. Although, I’ve been working on adding noise to a CSS gradient and didn’t find much help online so I wanted to share my solution.

Wow! CSS3 is like magic! Thanks for this tutorial!

You can cover nearly 100% of gradient-supporting browsers with just two lines:

The first line is realistically only needed for iOS 6-, Safari 6.1-, and Android 4.3-.

As you pointed out, filter for IE is gross (btw it’s not just about performance — it also turns off ClearType) so you need fallback images if your gradients are critical and not strictly decorational.

Those fallback images will also cover the extremely tiny percentage of browsers that still need prefixes, such as old versions of desktop Opera ( -o- ), Konquerer ( -khtml- ), and people who are not getting auto-updates for Chrome and Firefox (hardly anyone, according to StatCounter).

There’s no help for Opera Mini (where we’d want to avoid the HTTP request for the image) since it doesn’t support linear-gradient with or without a prefix.

A lot of sites include the -ms- variation but that was only necessary for one developer preview of IE 10, not any public release.

Tiny clarification points:

Remember to be very careful about the tweener syntax. For your top-to-bottom example, that will be fine, but I wouldn’t want people to think, oh I’ll just handle the prefixing myself with the syntax I already know… and do this:

Because that isn’t going to work. The unprefixed version there is using the tweener syntax and breaking it. You’ll need to do:

which I personally found hard to remember at easy to screw up.

Also, I’m not sure there was ever a public browser that needed -khtml- for gradients, was there?

Great new tools: Gradient Generator

Please don’t take it personally. I still prefer the background image version for now. Anyway, I can still set the image size to 1 pixel width, and turn it into base64 version.

Rather using an actual image file, is better for control and performance .

Better for control, but maybe not for performance. Using CSS gradients (especially multiple CSS gradient) makes the web pages heavy scrolled.

CSS gradients probably only suitable if used for scallable gradient on the container size that is not fixed. In fact, I more often make gradations for a fixed size, or specific height then leaving the rest as plain color without gradations.

I would have to see some real tests that prove that image gradients are better for scrolling performance. Do you have one available? I’m sure it’s possible but I don’t like throwing statements like that around.

Sorry. Different operating systems might yield in different results. At least that’s what I feel (slow). By searching for keyword CSS3+gradient+slow+scroll on Google , I get some of this link:

http://stackoverflow.com/a/4023133/1163000 https://bugzilla.mozilla.org/show_bug.cgi?id=657603 http://yannesposito.com/Scratch/en/blog/2010-07-07-CSS-rendering-problems-by-navigator http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps (see on Keep Graphics Simple )

As a live example, you can try to visit http://lea.verou.me/css3patterns with quite small screen then scroll down and feel. Then click on Carbon or Carbon Fibre pattern then scroll again and feel.

Example image patterns site with better scroll performance: http://subtlepatterns.com

CodePen example: Background Image vs. CSS3 Gradient

I’m surprised no-one’s mentioned CSS3Pie yet which does a pretty good job of bringing CSS3 gradients to older IE browsers.

CSS3 pie uses IE filers as well to accomplish the gradients in old IE, but we can write them ourself (if we really, really have to).

I have had issues with color fallback support using background or background-image specifically with IE7 and IE8. Thus, I write my code starting like this:

http://codepen.io/anon/pen/cuCql

Instead of two background properties for fallback and svg, put them on one line. This works flawlessly for oldIE and svg works for IE9.

I usually don’t come here to comment, but this article is so complete and thoughtful, that I had to say thank you: thank you man!

Its awesome. But it doesn’t work on ie9. Do you have any rule for ie9?

Great update on the new way for CSS Gradients Chris.. you did a really a great and thorough job, keep up the great work!

Here’s something I always use to generate them for me: http://colorzilla.com/gradient-editor/ .

It will generate the CSS for you with optional IE9 support.

I think using image instead of css properties has their cons and pros. First, using css for making gradient makes it harder to get it works in old browsers and computers. I normally tend to use photoshop instead of css properties for gradient. Using css is fast without need to use a third party software like photoshop or other graphics programs.

this is what i use (with LESS):

And then just call this wherever I need the gradient as background:

There is a mistake in the article. Since version 11.60 Opera is supporting the new “to” syntax for gradients. And since 12.10 gradient properties are unprefixed. They wouldn’t be unprefixed if they had deprecated, different from standardized, syntax. The latest Presto based Opera has support for every gradient related function (linear and radial, optionally repeating) and is compatible with W3C standards in that regard.

So the proper list would be: 11.00-: No support 11.10-11.50: Tweener, prefixed, only linear 11.60-12.00: New and legacy tweener , prefixed, added radial 12.10-12.16, 15+: New , unprefixed

Version 12.16 is still being used, so it is relevant.

(Also a small typo: “repeating liner gradients”)

Whoa! This is the first time I’m hearing about RADIAL gradient. That’s pretty awesome stuff. I’m definitely going to try it out. To be honest I once remembered how to write a pretty much completely cross browser friendly gradient. But now I just use an online tool to generate the whole thing for me.

Yeah agreed. Pretty cool that you can create something like that and get rid of all those images. It’s also great to see that a lot of the browsers do not require vendor prefixes anymore. Certainly reduces file sizes.

Great Demo, I was looking for a comprehensive script to implement on our new design for a blue sky gradient. I hope there wont be limitations on some browsers.

Don’t like to think about requirements like possible fallbacks. Hopefully i can forget about less and stuff like these one day and be more modern and intuitive. We are on the right way. Anyway “repeating-radial-gradient” was new for me.

Awesome that you can specify degrees and do radial gradients too.

WebKit Features in Safari 16.4

Mar 27, 2023

by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons

Web Push on iOS and iPadOS

Improvements for web apps, web components, javascript and webassembly, images, video, and audio, developer tooling, web inspector, safari web extensions, safari content blockers, new restrictions in lockdown mode, more improvements.

Today, we’re thrilled to tell you about the many additions to WebKit that are included in Safari 16.4. This release is packed with 135 new web features and over 280 polish updates. Let’s take a look.

You can experience Safari 16.4 on macOS Ventura , macOS Monterey, macOS Big Sur, iPadOS 16 , and iOS 16 . Update to Safari 16.4 on macOS Monterey or macOS Big Sur by going to System Preferences → Software Update → More info, and choosing to update Safari. Or update on macOS Ventura, iOS or iPadOS, by going to Settings → General → Software Update.

iOS and iPadOS 16.4 add support for Web Push to web apps added to the Home Screen. Web Push makes it possible for web developers to send push notifications to their users through the use of Push API , Notifications API , and Service Workers .

Deeply integrated with iOS and iPadOS, Web Push notifications from web apps work exactly like notifications from other apps. They show on the Lock Screen, in Notification Center, and on a paired Apple Watch. Focus provides ways for users to precisely configure when or where to receive Web Push notifications — putting users firmly in control of the experience. For more details, read Web Push for Web Apps on iOS and iPadOS .

WebKit on iOS and iPadOS 16.4 adds support for the Badging API . It allows web app developers to display an app badge count just like any other app on iOS or iPadOS. Permission for a Home Screen web app to use the Badging API is automatically granted when a user gives permission for notifications.

To support notifications and badging for multiple installs of the same web app, WebKit adds support for the id member of the Web Application Manifest standard. Doing so continues to provide users the convenience of saving multiple copies of a web app, perhaps logged in to different accounts separating work and personal usage — which is especially powerful when combined with the ability to customize Home Screen pages with different sets of apps for each Focus .

iOS and iPadOS 16.4 also add support so that third-party web browsers can offer “Add to Home Screen” in the Share menu. For the details on how browsers can implement support, as well more information about all the improvements to web apps, read Web Push for Web Apps on iOS and iPadOS .

We continue to care deeply about both the needs of a wide-range of web developers and the everyday experience of users. Please keep sending us your ideas and requests . There’s more work to do, and we couldn’t be more excited about where this space is headed.

Web Components is a suite of technologies that together make it possible to create reusable custom HTML elements with encapsulated functionality. Safari 16.4 improves support for Web Components with several powerful new capabilities.

Safari 16.4 adds support Declarative Shadow DOM, allowing developers to define shadow DOM without the use of JavaScript. And it adds support for ElementInternals , providing the basis for improved accessibility for web components, while enabling custom elements to participate in forms alongside built-in form elements.

Also, there’s now support for the Imperative Slot API. Slots define where content goes in the template of a custom element. The Imperative Slot API allows developers to specify the assigned node for a slot element in JavaScript for additional flexibility.

Safari 16.4 adds support for quite a few new CSS properties, values, pseudo-classes and syntaxes. We are proud to be leading the way in several areas to the future of graphic design on the web.

Margin Trim

The margin-trim property can be used to eliminate margins from elements that are abutting their container. For example, imagine we have a section element, and inside it we have content consisting of an h2 headline and several paragraphs. The section is styled as a card, with an off-white background and some padding. Like usual, the headline and paragraphs all have top and bottom margins — which provide space between them. But we actually don’t want a margin above the first headline, or after the last paragraph. Those margins get added to the padding, and create more space than what’s desired.

Often web developers handle this situation by removing the top margin on the headline with h2 { margin-block-start: 0 } and the bottom margin on the last paragraph with p:last-child { margin-block-end: 0 } — and hoping for the best. Problems occur, however, when unexpected content is placed in this box. Maybe another instance starts with an h3 , and no one wrote code to remove the top margin from that h3 . Or a second h2 is written into the text in the middle of the box, and now it’s missing the top margin that it needs.

The margin-trim property allows us to write more robust and flexible code. We can avoid removing margins from individual children, and instead put margin-trim: block on the container.

This communicates to the browser: please trim away any margins that butt up against the container. The rule margin-trim: block trims margins in the block direction, while margin-trim: inline trims margins in the inline direction.

Try this demo for yourself in Safari 16.4 or Safari Technology Preview to see the results.

Safari 16.4 also adds support for the new line height and root line height units, lh and rlh . Now you can set any measurement relative to the line-height. For example, perhaps you’d like to set the margin above and below your paragraphs to match your line-height.

The lh unit references the current line-height of an element, while the rlh unit references the root line height — much like em and rem.

Safari 16.4 adds support for font-size-adjust . This CSS property provides a way to preserve the apparent size and readability of text when different fonts are being used. While a web developer can tell the browser to typeset text using a specific font size, the reality is that different fonts will render as different visual sizes. You can especially see this difference when more than one font is used in a single paragraph. In the following demo , the body text is set with a serif font, while the code is typeset in a monospace font — and they do not look to be the same size. The resulting differences in x-height can be quite disruptive to reading. The demo also provides a range of font fallback options for different operating systems, which introduces even more complexity. Sometimes the monospace font is bigger than the body text, and other times it’s smaller, depending on which font family is actually used. The font-size-adjust property gives web developers a solution to this problem. In this case, we simply write code { font-size-adjust: 0.47; } to ask the browser to adjust the size of the code font to match the actual glyph size of the body font.

To round out support for the font size keywords, font-size: xxx-large is now supported in Safari 16.4.

Pseudo-classes

Safari 16.4 also adds support for several new pseudo-classes. Targeting a particular text direction, the :dir() pseudo-class lets you define styles depending on whether the language’s script flows ltr (left-to-right) or rtl ( right-to-left ). For example, perhaps you want to rotate a logo image a bit to the left or right, depending on the text direction:

Along with unprefixing the Fullscreen API (see below), the CSS :fullscreen pseudo-class is also now unprefixed. And in Safari 16.4, the :modal pseudo-class also matches fullscreen elements.

Safari 16.4 adds :has() support for the :lang pseudo-class, making it possible to style any part of a page when a particular language is being used on that page. In addition, the following media pseudo-classes now work dynamically inside of :has() , opening up a world of possibilities for styling when audio and video are in different states of being played or manipulated — :playing , :paused , :seeking , :buffering , :stalled , :picture-in-picture , :volume-locked , and :muted . To learn more about :has() , read Using :has() as a CSS Parent Selector and much more .

Safari 16.4 adds support for Relative Color Syntax. It provides a way to specify a color value in a much more dynamic fashion. Perhaps you want to use a hexadecimal value for blue, but make that color translucent — passing it into the hsl color space to do the calculation.

Or maybe you want to define a color as a variable, and then adjust that color using a mathematical formula in the lch color space, telling it to cut the lightness ( l ) in half with calc(l / 2) , while keeping the chroma ( c ) and hue ( h ) the same.

Relative Color Syntax is powerful. Originally appearing in Safari Technology Preview 122 in Feb 2021, we’ve been waiting for the CSS Working Group to complete its work so we could ship. There isn’t documentation on MDN or Can I Use about Relative Color Syntax yet, but likely will be soon. Meanwhile the Color 5 specification is the place to learn all about it.

Last December, Safari 16.2 added support for color-mix() . Another new way to specify a color value, the functional notation of color-mix makes it possible to tell a browser to mix two different colors together, using a certain color space .

Safari 16.4 adds support for using currentColor with color-mix() . For example, let’s say we want to grab whatever the current text color might be, and mix 50% of it with white to use as a hover color. And we want the mathematical calculations of the mixing to happen in the oklab color space. We can do exactly that with:

Safari 16.2 also added support for Gradient Interpolation Color Spaces last December. It allows the interpolation math of gradients — the method of determining intermediate color values — to happen across different color spaces. This illustration shows the differences between the default sRGB interpolation compared to interpolation in lab and lch color spaces:

Safari 16.4 adds support for the new system color keywords . Think of them as variables which represent the default colors established by the user, browser, or OS — defaults that change depending on whether the system is set to light mode, dark mode, high contrast mode, etc. For instance, Canvas represents the current default background color of the HTML page. Use system color keywords just like other named colors in CSS. For example, h4 { color: FieldText; } will style h4 headlines to match the default color of text inside form fields. When a user switches from light to dark mode, the h4 color will automatically change as well. Find the full list of system colors in CSS Color level 4 .

Media Queries Syntax Improvements

Safari 16.4 adds support for the syntax improvements from Media Queries level 4. Range syntax provides an alternative way to write out a range of values for width or height. For example, if you want to define styles that are applied when the browser viewport is between 400 and 900 pixels wide, in the original Media Query syntax, you would have written:

Now with the new syntax from Media Queries level 4, you can instead write:

This is the same range syntax that’s been part of Container Queries from its beginning, which shipped in Safari 16.0 .

Media Queries level 4 also brings more understandable syntax for combining queries using boolean logic with and , not , and or . For example:

Can instead be greatly simplified as:

Or, along with the range syntax changes, as:

Custom Properties

Safari 16.4 adds support for CSS Properties and Values API with support for the @property at-rule. It greatly extends the capabilities of CSS variables by allowing developers to specify the syntax of the variable, the inheritance behavior, and the variable initial value — similar to how browser engines define CSS properties.

With @property support, developers can to do things in CSS that were impossible before, like animate gradients or specific parts of transforms.

Web Animations

Safari 16.4 includes some additional improvements for web animations. You can animate custom properties. Animating the blending of mismatched filter lists is now supported. And Safari now supports KeyframeEffect.iterationComposite .

Outline + Border Radius

Until now, if a web developer styled an element that had an outline with a custom outline-style , and that element had curved corners, the outline would not follow the curve in Safari. Now in Safari 16.4, outline always follows the curve of border-radius .

CSS Typed OM

Safari 16.4 adds support for CSS Typed OM , which can be used to expose CSS values as typed JavaScript objects. Input validation for CSSColorValues is also supported as part of CSS Typed OM. Support for Constructible and Adoptable CSSStyleSheet objects also comes to Safari 16.4.

Safari 16.4 now supports lazy loading iframes with loading="lazy" . You might put it on a video embed iframe, for example , to let the browser know if this element is offscreen, it doesn’t need to load until the user is about to scroll it into view.

By the way, you should always include the height and width attributes on iframes, so browsers can reserve space in the layout for it before the iframe has loaded. If you resize the iframe with CSS, be sure to define both width and height in your CSS. You can also use the aspect-ratio property to make sure an iframe keeps it’s shape as it’s resized by CSS.

Now in Safari 16.4, a gray line no longer appears to mark the space where a lazy-loaded image will appear once it’s been loaded.

Safari 16.4 also includes two improvements for <input type="file"> . Now a thumbnail of a selected file will appear on macOS. And the cancel event is supported.

Safari 16.4 brings a number of useful new additions for developers in JavaScript and WebAssembly.

RegExp Lookbehind makes it possible to write Regular Expressions that check what’s before your regexp match. For example, match patterns like (?<=foo)bar matches bar only when there is a foo before it. It works for both positive and negative lookbehind.

JavaScript Import Maps give web developers the same sort of versioned file mapping used in other module systems, without the need for a build step.

Growable SharedArrayBuffer provided a more efficient mechanism for growing an existing buffer for generic raw binary data. And resizable ArrayBuffer allows for resizing of a byte array in JavaScript.

In WebAssembly, we’ve added support for 128-bit SIMD.

Safari 16.4 also includes:

• Array.fromAsync
• Array#group and Array#groupToMap
• Atomics.waitAsync
• import.meta.resolve()
• Intl.DurationFormat
• String#isWellFormed and String#toWellFormed
• class static initialization blocks
• Symbols in WeakMap and WeakSet

Safari 16.4 adds support for quite a few new Web API. We prioritized the features you’ve told us you need most.

Offscreen Canvas

When using Canvas, the rendering, animation, and user interaction usually happens on the main execution thread of a web application. Offscreen Canvas provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering can now also be transferred to a worker context, allowing developers to run tasks in a separate thread and avoid heavy work on the main thread that can negatively impact the user experience. The combination of DOM-independent operations and rendering of the main thread can provide a significantly better experience for users, especially on low-power devices. In Safari 16.4 we’ve added Offscreen Canvas support for 2D operations. Support for 3D in Offscreen Canvas is in development.

Fullscreen API

Safari 16.4 now supports the updated and unprefixed Fullscreen API on macOS and iPadOS. Fullscreen API provides a way to present a DOM element’s content so that it fills the user’s entire screen, and to exit fullscreen mode once it’s unneeded. The user is given control over exiting fullscreen mode through various mechanisms, include pressing the ‘Esc’ key on the keyboard, or performing a downwards gesture on touch-enabled devices. This ensures that the user always has the ability to exit fullscreen whenever they desire, preserving their control over the browsing experience.

Screen Orientation API

Along with the Fullscreen API we’ve added preliminary support for Screen Orientation API in Safari 16.4, including:

• ScreenOrientation.prototype.type returns the screen’s current orientation.
• ScreenOrientation.prototype.angle returns the screen’s current orientation angle.
• ScreenOrientation.prototype.onchange event handler, which fires whenever the screen changes orientation.

Support for the lock() and unlock() methods remain experimental features for the time being. If you’d like to try them out, you can enable them in the Settings app on iOS and iPadOS 16.4 via Safari → Advanced → Experimental Features → Screen Orientation API (Locking / Unlocking).

Screen Wake Lock API

The Screen Wake Lock API provides a mechanism to prevent devices from dimming or locking the screen. The API is useful for any application that requires the screen to stay on for an extended period of time to provide uninterrupted user experience, such as a cooking site, or for displaying a QR code.

User Activation API

User Activation API provides web developers with a means to check whether a user meaningfully interacted with a web page. This is useful as some APIs require meaningful “user activation”, such as, a click or touch, before they can be used. Because user activation is based on a timer, the API can be used to check if document currently has user activation as otherwise a call to an API would fail. Read The User Activation API for more details and usage examples.

WebGL Canvas Wide Gamut Color

WebGL canvas now supports the display-p3 wide-gamut color space. To learn more about color space support, read Improving Color on the Web , Wide Gamut Color in CSS with Display-P3 , and Wide Gamut 2D Graphics using HTML Canvas .

Compression Streams API

Compression Streams API allows for compressing and decompressing streams of data in directly in the browser, reducing the need for a third-party JavaScript compression library. This is handy if you need to “gzip” a stream of data to send to a server or to save on the user’s device.

Safari 16.4 also includes many other new Web API features, including:

• Reporting API
• Notification API in dedicated workers
• Permissions API for dedicated workers
• Service Workers and Shared Workers to the Permissions API
• gamepad.vibrationActuator
• A submitter parameter in the FormData constructor
• COEP violation reporting
• COOP/COEP navigation violation reporting
• Fetch Initiator
• Fetch Metadata Request Headers
• importing compressed EC keys in WebCrypto
• loading scripts for nested workers
• non-autofill credential type for the autocomplete attribute
• revoking Blob URLs across same-origin contexts
• isComposing attribute on InputEvent
• termination of nested workers
• transfer size metrics for first parties in ServerTiming and PerformanceResourceTiming
• KeyframeEffect.iterationComposite
• WEBGL_clip_cull_distance

Last fall, Safari 16 brought support for AVIF images to iOS 16, iPadOS 16 and macOS Ventura. Now with Safari 16.4, AVIF is also supported on macOS Monterey and macOS Big Sur. Updates to our AVIF implementation ensure animated images and images with film grain (noise synthesis) are now fully supported, and that AVIF works inside the <picture> element. We’ve also updated our AVIF implementation to be more lenient in accepting and displaying images that don’t properly conform to the AVIF standard.

Safari 16.4 adds support for the video portion of Web Codecs API . This gives web developers complete control over how media is processed by providing low-level access to the individual frames of a video stream. It’s especially useful for applications that do video editing, video conferencing, or other real-time processing of video.

Media features new to Safari 16.4 also include:

• Improvements to audio quality for web video conferencing
• Support for a subset of the AudioSession Web API
• Support for AVCapture virtual cameras
• Support for inbound rtp trackIdentifier stat field
• Support for VTT-based extended audio descriptions
• Support to allow a site to provide an “alternate” URL to be used during AirPlay

WKPreferences , used by WKWebView on iOS and iPadOS 16.4, adds a new shouldPrintBackgrounds API that allows clients to opt-in to including a pages’s background when printing.

Inspectable WebKit and JavaScriptCore API

Across all platforms supporting WKWebView or JSContext , a new property is available called isInspectable ( inspectable in Objective-C) on macOS 13.4 and iOS, iPadOS, and tvOS 16.4. It defaults to false , and you can set it to true to opt-in to content being inspectable using Web Inspector, even in release builds of apps.

When an app has enabled inspection, it can be inspected from Safari’s Develop menu in the submenu for either the current computer or an attached device. For iOS and iPadOS, you must also have enabled Web Inspector in the Settings app under Safari > Advanced > Web Inspector .

To learn more, read Enabling the Inspection of Web Content in Apps .

When automating Safari 16.4 with safaridriver , we now supports commands for getting elements inside shadow roots, as well as accessibility commands for getting the computed role and label of elements. When adding a cookie with safaridriver , the SameSite attribute is now supported. Improvements have also been made to performing keyboard actions, including better support for modifier keys behind held and support for typing characters represented by multiple code points, including emoji. These improvements make writing cross-browser tests for your website even easier.

Typography Tooling

Web Inspector in Safari 16.4 adds new typography inspection capabilities in the Fonts details sidebar of the Elements Tab.

Warnings are now shown for synthesized bold and oblique when the rendering engine has to generate these styles for a font that doesn’t provide a suitable style. This may be an indicator that the font file for a declared @font-face was not loaded. Or it may be that the specific value for font-weight or font-style isn’t supported by the used font.

A variable font is a font format that contains instructions on how to generate, from a single file, multiple style variations, such as weight, stretch, slant, optical sizing, and others. Some variable fonts allow for a lot of fine-tuning of their appearance, like the stroke thickness, the ascender height or descender depth, and even the curves or roundness of particular glyphs. These characteristics are expressed as variation axes and they each have a custom value range defined by the type designer.

The Fonts details sidebar now provides interactive controls to adjust values of variation axes exposed by a variable font and see the results live on the inspected page allowing you to get the font style that’s exactly right for you.

Tooling for Conditionals in CSS

The controls under the new User Preference Overrides popover in the Elements Tab allow you to emulate the states of media features like prefers-reduced-motion and prefers-contrast to ensure that the web content you create adapts to the user’s needs. The toggle to emulate the states of prefers-color-scheme , which was previously a standalone button, has moved to this new popover.

The Styles panel of the Elements Tab now allows editing the condition text for @media , @container and @supports CSS rules. This allows you to make adjustments in-context and immediately see the results on the inspected page. Here’s a quick tip: edit the condition of @supports to its inverse, like @supports not (display: grid) , to quickly check your progressive enhancement approach to styling and layout.

Badging HTML Elements

New badges for elements in the DOM tree of the Elements Tab join the existing badges for Grid and Flex containers. The new Scroll badge calls out scrollable elements, and the new Events badge provides quick access to the event listeners associated with the element when clicked. And a new Badges toolbar item makes it easy to show just the badges you are interested in and hide others.

Changes to Web Inspector in Safari 16.4 also include:

• Elements Tab: Improved visual hierarchy of the Layout sidebar.
• Elements Tab: Added support for nodes that aren’t visible on the page to appear dimmed in the DOM tree.
• Console Tab: Added support for console snippets.
• Sources Tab: Added showing relevant special breakpoints in the Pause Reason section.
• Sources Tab: Added support for inline breakpoints.
• Sources Tab: Added support for symbolic breakpoints
• Network Tab: Added a Path column.
• Network Tab: Added alphabetic sorting of headers.
• Network Tab: Added support for per-page network throttling.
• Network Tab: Added using the Shift key to highlight the initiator or initiated resources.
• Graphics Tab: Added OpenGL object IDs in the Canvas inspector.
• Settings Tab: Added a setting to turn off dimming nodes that aren’t visible on the page.
• Added support for function breakpoints and tracepoints.

Enhancements to Declarative Net Request

Safari is always working on improving support for declarativeNetRequest , the declarative way for web extensions to block and modify network requests. In Safari 16.4, several enhancements have been added to the API:

• The declarativeNetRequest.setExtensionActionOptions API can be used to configure whether to automatically display the action count (number of blocked loads, etc.) as the extension’s badge text.
• The modifyHeaders action type has been added to rewrite request and response headers. This action requires granted website permissions for the affected domains and the declarativeNetRequestWithHostAccess permission in the manifest.
• The redirect action type now requires the declarativeNetRequestWithHostAccess permission in the manifest.
• The MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES property has been added to check the maximum number of combined dynamic and session rules an extension can add. The current limit is set at 5,000 rules.

These enhancements give developers more options to customize their content blocking extensions and provide users with better privacy protection.

SVG Icon Support in Web Extensions

Safari 16.4 now supports SVG images as extension and action icons, giving developers more options for creating high-quality extensions. This support brings Safari in line with Firefox, allowing for consistent experiences across platforms. The ability to scale vector icons appropriately for any device means developers no longer need multiple sizes, simplifying the process of creating polished and professional-looking extensions.

Dynamic Content Scripts

Safari 16.4 introduces support for the new scripting.registerContentScript API, which enables developers to create dynamic content scripts that can be registered, updated, or removed programmatically. This API augments the static content scripts declared in the extension manifest, providing developers with more flexibility in managing content scripts and enabling them to create more advanced features for their extensions.

Toggle Reader Mode

The tabs.toggleReaderMode API has been added to Safari 16.4, which enables extensions to toggle Reader Mode for any tab. This function is particularly useful for extensions that want to enhance the user’s browsing experience by allowing them to focus on the content they want to read. By using this API, developers can create extensions that automate the process of enabling Reader Mode for articles, making it easier and more convenient for users to read online content.

Session Storage

The storage.session API, now supported in Safari 16.4, enables extensions to store data in memory for the duration of the browser session, making it a useful tool for storing data that takes a long time to compute or is needed quickly between non-persistent background page loads. This API is particularly useful for storing sensitive or security-related data, such as decryption keys or authentication tokens, that would be inappropriate to store in local storage. The session storage area is not persisted to disk and is cleared when Safari quits, providing enhanced security and privacy for users.

Background Modules

Developers can now take advantage of modules in background service workers and pages by setting "type": "module" in the background section of the manifest. This allows for more organized and maintainable extension code, making it easier to manage complex codebases. By setting this option, background scripts will be loaded as ES modules, enabling the use of import statements to load dependencies and use the latest JavaScript language features.

Safari 16.4 has added support for :has() selectors in Safari Content Blocker rules. This is a powerful new addition to the declarative content blocking capabilities of Safari, as it allows developers to select and hide parent elements that contain certain child elements. Its inclusion in Safari Content Blocker rules opens up a whole new range of possibilities for content blocking. Now developers can create more nuanced and precise rules that can target specific parts of a web page, making it easier to block unwanted content while preserving the user’s browsing experience. This is yet another example of Safari’s commitment to providing a secure and private browsing experience for its users while also offering developers the tools they need to create innovative and effective extensions.

Lockdown Mode is an optional, extreme protection that’s designed for the very few individuals who, because of who they are or what they do, might be personally targeted by some of the most sophisticated digital threats. Most people are never targeted by attacks of this nature.

If a user chooses to enable Lockdown mode on iOS 16.4, iPadOS 16.4, or macOS Ventura 13.3, Safari will now:

• Disable binary fonts in the CSS Font Loading API
• Disable Cache API
• Disable CacheStorage API
• Disable ServiceWorkers
• Disable SVG fonts
• Disable the WebLocks API
• Disable WebSpeech API

Safari 16.4 now supports dark mode for plain text files. It has support for smooth key-driven scrolling on macOS. And it adds prevention of redirects to data: or about: URLs.

In addition to the 135 new features, WebKit for Safari 16.4 includes an incredible amount work polishing existing features. We’ve heard from you that you want to know more about the many fixes going into each release of Safari. We’ve done our best to list everything that might be of interest to developers, in this case, 280 of those improvements:

• Fixed -webkit-mask-box-image: initial to set the correct initial value.
• Fixed -webkit-radial-gradient parsing accidentally treating several mandatory commas as optional.
• Fixed ::placeholder to not support writing-mode , direction , or text-orientation.
• Fixed @supports to not work if not , or , or and isn’t followed by a space.
• Fixed background-repeat not getting correctly exposed through inline styles.
• Fixed baseline-shift to allow length or percentage, but not numbers.
• Fixed contain: inline-size for replaced elements.
• Fixed CSSPerspective.toMatrix() to throw a TypeError if its length is incompatible with the px unit.
• Fixed cx , cy , x , and y CSS properties to allow length or percentage, but not numbers.
• Fixed filter: blur on an absolutely positioned image losing overflow: hidden .
• Fixed font-face to accept ranges in reverse order, and reverse them for computed styles.
• Fixed font-style: oblique must allow angles equal to 90deg or -90deg.
• Fixed font-style: oblique with calc() to allow out-of-range angles and clamp them for computed style.
• Fixed font-weight to clamp to 1 as a minimum.
• Fixed font shorthand to reject out-of-range angles for font-style .
• Fixed font shorthand to reset more longhand properties.
• Fixed overflow-x: clip causing a sibling image to not load.
• Fixed overflow: clip not working on SVG elements.
• Fixed stroke-dasharray parsing to align with standards.
• Fixed stroke-width and stroke-dashoffset parsing to align with standards.
• Fixed text-decoration-thickness property not repainting when changed.
• Fixed allowing calc() that combines percentages and lengths for line-height .
• Fixed an issue where using box-sizing: border-box causes the calculated aspect-ratio to create negative content sizes.
• Fixed an issue with a monospace font on a parent causing children with a sans-serif font using rem or rlh units to grow to a larger size.
• Fixed behavior of cursor: auto over links.
• Fixed buttons with auto width and height to not set intrinsic margins.
• Fixed calculating block size to use the correct box-sizing with aspect ratio.
• Fixed cells overflowing their contents when a table cell has inline children which change writing-mode .
• Fixed clipping perspective calc() values to 0.
• Fixed font shorthand to not reject values that happen to have CSS-wide keywords as non-first identifiers in a font family name.
• Fixed hit testing for double-click selection on overflowing inline content.
• Fixed honoring the content block size minimum for a <fieldset> element with aspect-ratio applied.
• Fixed incorrectly positioned line break in contenteditable with tabs.
• Fixed invalidation for class names within :nth-child() selector lists.
• Fixed omitting the normal value for line-height from the font shorthand in the specified style, not just the computed style.
• Fixed pseudo-elements to not be treated as ASCII case-insensitive.
• Fixed rejecting a selector argument for :nth-of-type or :nth-last-of-type .
• Fixed serialization order for contain .
• Fixed strings not wrapped at zero width spaces when word-break: keep-all is set.
• Fixed supporting <string> as an unprefixed keyframe name.
• Fixed the :has() pseudo-selector parsing to be unforgiving.
• Fixed the font-face src descriptor format to allow only specified formats, others are a parse error.
• Fixed the tz component not accounting for zoom when creating a matrix3d () value.
• Fixed the computed value for stroke-dasharray to be in px .
• Fixed the effect of the writing-mode property not getting removed when the property is removed from the root element.
• Fixed the position of text-shadow used with text-combine-upright .
• Fixed the title of a style element with an invalid type to never be added to preferred stylesheet set.
• Fixed the transferred min/max sizes to be constrained by defined sizes for aspect ratio.
• Fixed the user-agent stylesheet to align hidden elements, abbr , acronym , marquee , and fieldset with HTML specifications.
• Fixed to always use percentages for computed values of font-stretch , never keywords.
• Fixed to not require whitespace between of and the selector list in :nth-child or :nth-last-child .
• Fixed CSS.supports returning false for custom properties.
• Fixed CSS.supports whitespace handling with !important .
• Fixed forgiving selectors to not be reported as supported with CSS.supports("selector(...)") .
• Fixed getComputedStyle() to return a function list for the transform property.
• Fixed linear-gradient keyword values not getting converted to their rgb() equivalents for getComputedStyle() .

Content Security Policy

• Fixed updating the Content Security Policy when a new header is sent as part of a 304 response.
• Fixed <input type="submit"> , <input type="reset">, and <input type="button"> to honor font-size , padding , height , and work with multi-line values.
• Fixed firing the change event for <input type="file"> when a different file with the same name is selected.
• Fixed preventing a disabled <fieldset> element from getting focus.
• Fixed the :out-of-range pseudo class matching for empty input[type=number] .
• Fixed Array.prototype.indexOf constant-folding to account for a non-numeric index.
• Fixed Intl.NumberFormat useGrouping handling to match updated specs.
• Fixed Intl.NumberFormat ignoring maximumFractionDigits with compact notation.
• Fixed String.prototype.includes incorrectly returning false when the string is empty and the position is past end of the string.
• Fixed toLocaleLowerCase and toLocaleUpperCase to throw an exception on an empty string.
• Fixed aligning the parsing of <body link vlink alink> to follow standards.
• Fixed <legend> to accept more display property values than display: block .

Intelligent Tracking Prevention

• Fixed user initiated cross-domain link navigations getting counted as Top Frame Redirects.
• Fixed some display issues with HDR AVIF images.
• Fixed the accept header to correctly indicate AVIF support.

Lockdown Mode

• Fixed common cases of missing glyphs due to custom icon fonts.
• Fixed enumerateDevices may return filtered devices even if page is capturing.
• Fixed MediaRecorder.stop() firing an additional dataavailable event with bytes after MediaRecorder.pause() .
• Fixed duplicate timeupdate events.
• Fixed limiting DOMAudioSession to third-party iframes with microphone access.
• Fixed MSE to not seek with no seekable range.
• Fixed mute microphone capture if capture fails to start because microphone is used by a high priority application.
• Fixed not allowing text selection to start on an HTMLMediaElement.
• Fixed only requiring a transient user activation for Web Audio rendering.
• Fixed screen capture to fail gracefully if the window or screen selection takes too long.
• Fixed switching to alternate <source> element for AirPlay when necessary.
• Fixed the local WebRTC video element pausing after bluetooth audioinput is disconnected.
• Fixed trying to use low latency for WebRTC HEVC encoder when available.
• Fixed unmuting a TikTok video pauses it.
• Fixed WebVTT styles not applied with in-band tracks.
• Ensured negative letter-spacing does not pull content outside of the inline box
• Fixed <div> with border-radius not painted correctly while using jQuery’s .slideToggle() .
• Fixed border-radius clipping on composited layers.
• Fixed box-shadow to paint correctly on inline elements.
• Fixed box-shadow invalidation on inline boxes.
• Fixed calculating the width of an inline text box using simplified measuring to handle fonts with Zero Width Joiner , Zero Width Non-Joner , or Zero Width No-Break Space .
• Fixed clearing floats added dynamically to previous siblings.
• Fixed clipping the source image when the source rectangle is outside of the source image in canvas.
• Fixed CSS keyframes names to not allow CSS wide keywords.
• Fixed elements with negative margins not avoiding floats when appropriate.
• Fixed floating boxes overlapping with their margin boxes.
• Fixed HTMLImageElement width and height to update layout to return styled dimensions not the image attributes.
• Fixed ignoring nowrap on <td nowrap="nowrap"> when an absolute width is specified.
• Fixed incorrect clipping when a layer is present between the column and the content layer.
• Fixed incorrect static position of absolute positioned elements inside relative positioned containers.
• Fixed layout for fixed position elements relative to a transformed container.
• Fixed layout overflow rectangle overflows interfering with the scrollbar.
• Fixed negative shadow repaint issue.
• Fixed preventing a focus ring from being painted for anonymous block continuations.
• Fixed recalculating intrinsic widths in the old containing block chain when an object goes out of flow.
• Fixed rendering extreme border-radius values.
• Fixed specified hue interpolation method for hues less than 0 or greater than 360.
• Fixed tab handling in right-to-left editing.
• Fixed text selection on flex and grid box items.
• Fixed the position and thickness of underlines to be device pixel aligned.
• Fixed transforms for table sections.
• Fixed transition ellipsis box from “being a display box on the line” to “being an attachment” of the line box.
• Fixed unexpected overlapping selection with tab in right-to-left context.
• Fixed updating table rows during simplified layout.
• Fixed: improved balancing for border, padding, and empty block content.
• Extensions that request the unlimitedStorage permission no longer need to also request storage .
• Fixed browser.declarativeNetRequest namespace is now available when an extension has the declarativeNetRequestWithHostAccess permission.
• Fixed isUrlFilterCaseSensitive declarativeNetRequest rule condition to be false by default.
• Fixed tabs.onUpdated getting called on tabs that were already closed.
• Fixed background service worker failing to import scripts.
• Fixed content scripts not injecting into subframes when extension accesses the page after a navigation.
• Fixed CORS issue when doing fetch requests from a background service worker.
• Fixed declarativeNetRequest errors not appearing correctly in the extension’s pane of Safari Settings.
• Fixed display of extension cookie storage in Web Inspector. Now the extension name is shown instead of a UUID.
• Fixed declarativeNetRequest rules not loading when an extension is turned off and then on.
• Fixed result of getMatchedRules() to match other browsers.
• Fixed browser.webNavigation events firing for hosts where the extension did not have access.
• Removed Keyboard Shortcut conflict warnings for browser.commands when there are multiple commands without keyboard shortcuts assigned.
• Fixed overscroll-behavior: none to prevent overscroll when the page is too small to scroll.
• Fixed <svg:text> to not auto-wrap.
• Fixed preserveAspectRatio to stop accepting defer .
• Fixed SVG.currentScale to only set the page zoom for a standalone SVG.
• Fixed svgElement.setCurrentTime to restrict floats to finite values.
• Fixed applying changes to fill with currentColor to other colors via CSS.
• Fixed changes to the filter property getting ignored.
• Fixed CSS and SVG filters resulting in a low quality, pixelated image.
• Fixed focusability even when tab-to-links is enabled for <svg:a> .
• Fixed handling animation freezes when repeatDur is not a multiple of dur .
• Fixed making sure computed values for baseline-shift CSS property use px unit for lengths.
• Fixed not forcing display: table-cell , display: inline-table , display: table , and float: none on table cell elements when in quirks mode.
• Fixed removing the visual border when the table border attribute is removed.
• Fixed font-optical-sizing: auto having no effect in Safari 16.
• Fixed directionality of the <bdi> and <input> elements to align with HTML specifications.
• Fixed handling an invalid dir attribute to not affect directionality.
• Fixed the default oblique angle from 20deg to 14deg .
• Fixed the handling of <bdo> .
• Fixed the order of how @font-palette-values override-colors are applied.
• Fixed @keyframes rules using an inherit value to update the resolved value when the parent style changes.
• Fixed Animation.commitStyles() triggering a mutation even when the styles are unchanged.
• Fixed Animation.startTime and Animation.currentTime setters support for CSSNumberish values.
• Fixed baseline-shift animation.
• Fixed baselineShift inherited changes.
• Fixed commitStyles() failing to commit a relative line-height value.
• Fixed getKeyframes() serialization of CSS values for an onkeyframe sequence.
• Fixed rotate: x and transform: rotate(x) to yield the same behavior with SVGs.
• Fixed word-spacing to support animating between percentage and fixed values.
• Fixed accounting for non-inherited CSS variables getting interpolated for standard properties on the same element.
• Fixed accumulating and clamping filter values when blending with "none" .
• Fixed accumulation support for the filter property.
• Fixed additivity support for the filter property.
• Fixed animation of color list custom properties with iterationComposite .
• Fixed blend transform when iterationComposite is set to accumulate .
• Fixed blending to account for iterationComposite .
• Fixed Calculating computed keyframes for shorthand properties.
• Fixed composite animations to compute blended additive or accumulative keyframes for in-between keyframes.
• Fixed computing the keyTimes index correctly for discrete values animations.
• Fixed CSS animations participation in the cascade.
• Fixed custom properties to support interpolation with a single keyframe.
• Fixed filter values containing a url() should animate discretely.
• Fixed interpolating custom properties to take iterationComposite into account.
• Fixed jittering when animating a rotated image.
• Fixed keyframes to be recomputed if a custom property registration changes.
• Fixed keyframes to be recomputed if the CSS variable used is changed.
• Fixed keyframes to be recomputed when bolder or lighter is used on a font-weight property.
• Fixed keyframes to be recomputed when a parent element changes value for a custom property set to inherit .
• Fixed keyframes to be recomputed when a parent element changes value for a non-inherited property set to inherit .
• Fixed keyframes to be recomputed when the currentcolor value is used on a custom property.
• Fixed keyframes to be recomputed when the currentcolor value is used.
• Fixed opacity to use unclamped values for from and to keyframes with iterationComposite .
• Fixed running a transition on an inherited CSS variable getting reflected on a standard property using that variable as a value.
• Fixed seamlessly updating the playback rate of an animation.
• Fixed setting iterationComposite should invalidate the effect.
• Fixed setting the transition-property to none does not disassociate the CSS Transition from owning the element.
• Fixed the composite operation of implicit keyframes for CSS Animations to return "replace" .
• Fixed the timing model for updating animations and sending events.
• Fixed updating timing to invalidate the effect.
• Fixed -webkit-user-select: none allowing text to be copied to clipboard.
• Fixed contentEditable caret getting left aligned instead of centered when the :before pseudo-element is used.
• Fixed Cross-Origin-Embedder-Policy incorrectly blocking scripts on cache hit.
• Fixed CSSRule.type to not return values greater than 15.
• Fixed document.open() to abort all loads when the document is navigating.
• Fixed document.open() to remove the initial about:blank -ness of the document.
• Fixed Element.querySelectorAll not obeying element scope with ID.
• Fixed FileSystemSyncAccessHandle write operation to be quota protected.
• Fixed getBoundingClientRect() returning the wrong value for <tr> , <td> , and its descendants for a vertical table.
• Fixed HTMLOutputElement.htmlFor to make it settable.
• Fixed queryCommandValue("stylewithcss") to always return an empty string.
• Fixed StorageEvent.initStorageEvent() to align with HTML specifications.
• Fixed textContent leaving dir=auto content in the wrong direction.
• Fixed -webkit-user-select: initial content within -webkit-user-select: none should be copied
• Fixed WorkerGlobalScope.isSecureContext to be based on the owner’s top URL, not the owner’s URL.
• Fixed a bug where mousedown without mouseup in a frame prevents a click event in another frame.
• Fixed a sometimes incorrect location after exiting mouse hover.
• Fixed accepting image/jpg for compatibility.
• Fixed adding a non-breaking space, instead of a plain space, when it is inserted before an empty text node.
• Fixed behavior of nested click event on a label element with a checkbox.
• Fixed BroadcastChannel in a SharedWorker when hosted in a cross-origin iframe.
• Fixed calculation of direction for text form control elements with dir="auto" .
• Fixed canvas fallback content focusability computation.
• Fixed deleting a button element leaving the button’s style in a contenteditable element.
• Fixed disconnected <fieldset> elements sometimes incorrectly matching :valid or :invalid selectors.
• Fixed dragging the mouse over a -webkit-user-select: none node can begin selection in another node.
• Fixed ensuring nested workers get controlled if matching a service worker registration.
• Fixed errors caught and reported for importScripts() .
• Fixed escaping “&” in JavaScript URLs for innerHTML and outerHTML .
• Fixed EventSource to stop allowing trailing data when parsing a retry delay.
• Fixed Fetch Request object to keep its Blob URL alive.
• Fixed filled text on a canvas with a web font refreshing or disappearing.
• Fixed find on page failing to show results in PDFs.
• Fixed firing an error event when link preload fails synchronously.
• Fixed form submissions to cancel JavaScript URL navigations.
• Fixed handing the onerror content attribute on body and frameset elements.
• Fixed handling opaque origin Blob URLs.
• Fixed handling text documents to align to modern HTML specifications.
• Fixed handling the onerror content attribute on <body> and <frameset> elements.
• Fixed HTMLTemplateElement to have a shadowRootMode attribute.
• Fixed including alternate stylesheets in document.styleSheets .
• Fixed incorrect caret movement in some right-to-left contenteditable elements.
• Fixed incorrect color for videos loaded in a canvas.
• Fixed incorrect image srcset candidate chosen for <img> cloned from <template> .
• Fixed incorrectly ignored X-Frame-Options HTTP headers with an empty value.
• Fixed lazy loading images sometimes not loading.
• Fixed link elements to be able to fire more than one load or error event.
• Fixed loading Blob URLs with a fragment from opaque, unique origins.
• Fixed maintaining the original Content-Type header on a 303 HTTP redirect.
• Fixed module scripts to always decode using UTF-8.
• Fixed MouseEventInit to take movementX and movementY .
• Fixed not dispatching a progress event when reading an empty file or blob using the FileReader API.
• Fixed not replacing the current history item when navigating a cross-origin iframe to the same URL.
• Fixed overriding the mimetype for an XHR.
• Fixed parsing of negative age values in CORS prefetch responses.
• Fixed pasting of the first newline into text area.
• Fixed preventing selection for generated counters in ordered lists.
• Fixed Safari frequently using stale cached resources despite using Reload Page From Origin.
• Fixed scheduling a navigation to a Blob URL to keep the URL alive until the navigation occurs.
• Fixed sending Basic authentication via XHR using setRequestHeader() when there is an existing session.
• Fixed setting style="" to destroy the element’s inline style.
• Fixed setting the tabIndex of a non-focusable HTMLElement.
• Fixed system colors not respecting inherited color-scheme values.
• Fixed textarea placeholder text not disappearing when text is inserted without a user gesture.
• Fixed the event.keyIdentifier value for F10 and F11 keys.
• Fixed the click event to not get suppressed on textarea resize.
• Fixed the computed value for the transform property with SkewY .
• Fixed the initialization of color properties.
• Fixed timing of ResizeObserver and IntersectionObserver to match other browsers.
• Fixed toggling a details element when a summary element receives a click() .
• Fixed updating Text node children of an option element to not reset the selection of the select element.
• Fixed using NFC Security Key on iOS.
• Fixed using WebAuthn credentials registered on iOS 15 if iCloud Keychain is disabled.
• Fixed WebAuthn sending Attestation as None when requested as Direct.
• Fixed XHR aborting to align with standards specification
• Fixed XHR error events to return 0 for loaded and total.
• Fixed: Made all FileSystemSyncAccessHandle methods synchronous.
• Fixed: Removed the precision="float" attribute on <input type="range"> .
• Fixed video textures set to repeat.
• Fixed “Inspect Element” not highlighting the element.
• Fixed capturing async stack traces for queueMicrotask .
• Fixed clicking coalesced events in the timeline selecting the wrong event.
• Fixed event breakpoints to support case-insensitive and RegExp matching.
• Fixed slow search with a lot of files in the Open Resource dialog.
• Fixed sorting prefixed properties below non-prefixed properties in the Computed panel of the Elements Tab.
• Fixed the always empty Attributes section in the Node panel of the Elements Tab.
• Fixed the Computed Tab scrolling to the top when a <style> is added to the page.
• Fixed URL breakpoints to also pause when HTML attributes are set that trigger loads.
• Fixed “Get Element Rect” to not round to integer values.
• Fixed automation sessions terminating during navigation.
• Fixed click element failing on iPad when Stage Manager is disabled.
• Fixed HTTP GET requests with a body failing.
• Fixed the Shift modifier key not applying to typed text.

We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 16.4. Find us on Mastodon at @[email protected] and @[email protected] . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technology or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also read the Safari 16.4 release notes .

Linear Gradient - differences in Chrome/Safari

Different browsers (or layout engines) often behave slightly different. One of those differences caught me off guard recently. The culprit: linear-gradient. To be more precise a fade effect from transparent to white.

Image you have a box with text of fixed height and you wan't to fade out the text. A simple implementation would look something like this:

With the following styling:

So nothing fancy here. Basically an overlay with a height of 100px and fading from transparent to white. Works in Chrome? Yes, so we are good to go... Actually not quite.

The Problem

As you may have noticed, we used rgba(0, 0, 0, 0) for our transparent color. So a nice pure black with an alpha channel of 0. Turns out, Safari is pretty strict here and draws a strange looking grey gradient.

The Solution

So what can we do about this? Luckily, it is sufficient to change the transparent color from a transparent black rgba(0, 0, 0, 0) to a transparent white rgba(255, 255, 255, 0) . With this simple fix everything looks as expected in Safari as well.

Checkout the Codepen!

Tip: If you want to prevent the fade effect to interfere with your text selection, add pointer-events: none to .fade .

--> Web Directions Year round learning for product, design and engineering professionals

Css3 linear gradients.

It’s been a while since we posted anything particularly technical to the Web Directions blog, but that’s something we plan on changing. Here’s the first in a series of technical articles on CSS3 features (along with tools to help you lean and use them).

We’re starting with linear gradients. We’ll take a look at where they come from, how to use them, and the current level of browser support. Ironically although webkit introduced gradients, until version 5.1, Safari has supported a different syntax from that described here – so, if you are using a version of Safari other than 5.1 (currently in beta) you won’t be able to see the examples.

A little history

webkit first introduced the proposed gradient feature of CSS3 way back in 2008, enabling the browser to generate a gradient to be used where images are in CSS – most commonly as a background image, but also potentially for list items images, border-images, and generated content. Firefox 3.6 followed suit, but introduced a couple of challenges. It introduced a different syntax (now adopted as the proposed CSS3 gradient syntax), and gradients were only available as background images (this restriction is still true today). Not surprisingly, the webkit based Chrome supports gradients, as does Opera since version 11.1 (though only linear gradients (more in a second) are currently supported). What of Internet Explorer you ask? Well, version 10 in fact supports gradients !

Don’t be too alarmed by the two different syntaxes – webkit now supports the same syntax as other browsers, as of Safari 5.1 (we’ll also look at how to ensure maximum browser compatibility in a moment as well).

How they work

Enough history, let’s play with them. There are in fact, as mentioned above, two kinds of gradients (linear and radial gradients). In this article, we’ll focus on linear gradients – and return to radial gradients in an upcoming article.

Gradients aren’t properties (like color ), but are a computed values of CSS, something you might not be too familiar with. We use them where we’d typically use a url pointing to an image (most commonly background-image ). In essence, the browser generates an image and uses that.

Here’s one in action

Don’t Panic!

OK, so I’ve cheated a little and added a bit more style, but that subtle gradient is all done with CSS. Try increasing the text size – and see how the background gradient continues to fill the element.

Here’s what the CSS looks like.

background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%);

(I said don’t panic for a reason – if you are interested in the underlying concepts, read on. But if you are a more hands-on kind of learner, simply head to the gradient tool I’ve built , and start playing.)

The linear-gradient starts at the top of the element (we’ll see shortly there are other places it can start) and runs vertically to the bottom of the element. At the top, the initial color is #eff6fb. At 68% down the element, the color is #d3e4f3, and the browser generates a gradient image that smoothly transitions from #eff6fb to #d3e4f3. From 68% down the element, to its bottom, the color is a solid #d3e4f3.

BTW, “# d3e4f3 68% ” is called a color stop – and gradients can potentially have many stops.

Before we go on, let’s recap. A gradient is value, starting with the keyword linear-gradient , and then containing a number of values inside parentheses. These values specify the direction of the gradient (in this case from top to bottom), a starting color, and then one or more color stops. A color stop is a color value, with an optional length or percentage value (for example, we can have a stop at 1em, 20px and so on).

Here, for example is a gradient with numerous stops

background-image: linear-gradient( left, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)

The gradient direction

We specify the direction of the gradient in one of two ways. We can specify where it starts horizontally with the keywords left and right, and vertically with the keywords top and bottom. Let’s look at each of these (just follow the link to see each)

• background-image: linear-gradient(top , #FFFFFF, #000000 )
• background-image: linear-gradient(bottom , #FFFFFF, #000000 )
• background-image: linear-gradient( left, #FFFFFF, #000000 )
• background-image: linear-gradient( right, #FFFFFF, #000000 )

We can also combine keywords – to create diagonal gradients from the top left, bottom left, top right and bottom right:

• background-image: linear-gradient(top left, #FFFFFF, #000000 )
• background-image: linear-gradient(bottom left, #FFFFFF, #000000 )
• background-image: linear-gradient(top right, #FFFFFF, #000000 )
• background-image: linear-gradient(bottom right, #FFFFFF, #000000 )

But gradients would be pretty dull if they could only be horizontal, vertical, or diagonal, so there’s a second way to specify the gradient direction-degrees. (You use keywords or degrees, not both together).

To specify a gradient angle, we use the format 90deg (0deg has the gradient start at the left, 90deg at the bottom, 180deg at the right, and 270deg at the top. So, we can think of degrees as going counter-clockwise from 9 o’clock (0deg).)

As usual, the simplest way to understand this is to play with it – so head over to the gradient tool I’ve built expressly for this purpose, and vary the angle to see what happens.

background-image: linear-gradient(126deg, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)

Repeating gradients

Is your head full of complex stuff yet – color stops, gradient angles, and so on? Well, let’s add to that, with repeating gradients. That’s right, you can repeat a gradient. Here’s how that works. If your last color stop is before the “end” of the element (so, for example if the gradient goes from left to right, the last stop is less than 100% of the width of the element), then the gradient will be repeated from the location of the last color stop. If we have a simple gradient like this

background-image: linear-gradient(0deg, #FF0000, #FFA500 50%)

then we change the value name from linear-gradient to repeating-linear-gradient , then we’ll have the gradient repeat itself from 50% to 100% of the width of the element, like so

background-image: repeating-linear-gradient(0deg, #FF0000, #FFA500 50%)

Forget the math, here’s a tool

As I mentioned above, there’s no need to remember all the syntax and concepts – as I’ve developed the linear gradient tool to make life easier for you. (In fact I significantly overhauled the version I developed something like 2 years ago, to provide widespread browser support, and support the new syntax more fully.)

There are some other good gradient tools out there as well, including ColorZilla . I’ve designed this (and my other CSS3 tools ) to closely follow the concepts of CSS gradients, to be as much a tool for learning, as for producing fine looking gradients.

It also has some additional features you might like.

• You can tweet a link to a gradient you’ve created by simply clicking a button
• You can copy the url of your gradient, and send it to someone via email, put it in a link (like I’ve done for many of these examples) or otherwise share it
• Via the magic of HTML5 localStorage, it remembers your most recent gradient, and other settings next time you visit
• It adds vendor prefixes for all modern browsers as an option
• It adds the start color as a background color for older browsers
• There’s a related tool for creating old style Safari gradients
• It provides up to the minute browser compatibility information
• It looks really pretty, all thanks to CSS gradients of course

So give it a go, and tell me what you think .

Backwards compatibility

Now, you might be asking yourself, what about the backwards compatibility issues with older browsers and are there any accessibility challenges in using gradients? Luckily, gradients are really straightforward to use in an accessible, backwards compatible way, across multiple browsers provided you keep a couple of things in mind.

Firstly, ensure you have a background color (or image) for the element to ensure color contrast with the text. Where gradients aren’t supported, the browser will ignore them, and use the color or image.

At present, all browsers require vendor specific extensions for gradient values. The gradient tool will create those for you. Make sure that you include a gradient value with no vendor extensions, and make this the last of the properties you specify (as we know, if CSS, the last property trumps earlier ones in the rule). So for example

For older versions of Safari, we’ll need to have a different background-image property. Not only is the syntax different, the concepts are too, so you might like to use my old style CSS3 Linear Gradient generator to help you out.

And, wth the exception of webkit, gradients are only applicable to backgrounds, (webkit browsers support gradients anywhere images are used.)

Browser Support Notes

A quick summary of current browser support for CSS Linear Gradients.

• Safari 4 introduced linear gradients, though as noted with a different syntax from that detailed here. The vendor prefix -webkit- is required for gradients (e.g. -webkit-linear-gradient)
• Safari 5.1 introduces the syntax detailed here, as well as continuing to support the older style syntax. Again, the -webkit-vendor prefix is required.
• Firefox 3.6 was the first browser to support the current gradient syntax. The -moz- prefix is required, and it’s currently only supported on backgrounds.
• Chrome 10 and up (and probably earlier versions) supported the syntax for gradients detailed here. The -webkit- prefix is required.
• Opera 11.1 introduced linear gradients, once again with the vendor prefix, -o- required. Currently gradients are only supported on backgrounds.
• Internet Explorer 10 also features CSS gradients, using the prefix -ms-, and also only supported on backgrounds.

And just to make life easy, there is talk at the W3C CSS Working Group of changing the syntax yet again.

More links, examples, and so on

• Lea Verou has some great presentations on Gradients, including one at our recent @media conference, which you can watch the slides of and listen to
• Lea has also put together a CSS pattern gallery , showcasing some amazing designs using CSS gradients
• Estelle Weyl also has a great gallery of gradient patterns
• Detailed support information for css gradients, and many other modern HTML5, CSS3 and DOM features is available at When Can I Use?

To do on the Generator

• At present, the generator only supports hex color values. Enabling rgba and color keywords (particularly transparent) are important next steps.
• Support for multiple background gradients on a single element, used extensively at the CSS Gradient Gallery
• Automatic generation of older webkit style syntax.
• Taking requests – let me know what you’d like to see

Great reading, every weekend.

We round up the best writing about the web and send it your way each Friday.

delivering year round learning for front end and full stack professionals

Learn more about us

Three days of talks, two of them in the engineering room. Web Directions you have broken my brain. Cheryl Gledhill Product Manager, BlueChilli Founder, Campaign Monitor -->

Join us in 2019:

Safari, iOS, linear-gradient and color-mix issues

I have a web site that uses CSS linear-gradient with color-mix for a background of a division. It shows up just fine in Safari on iOS and iPadOS 17.4.1. When do a screenshot, and select "Full Page", the background-image becomes all black and the text in the division is unreadable.

Here is an example of what I am doing.

Any ideas how to get this to not turn black?

I've tried using a print media query but the "Full Page" screenshot does not use that.

It looks like it might be a bug in iOS/iPadOS.

Safari bug with gradients that fade to "transparent"

Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:

Code language: CSS

There is a pretty big gotcha here, though. In Chrome (also Android), Firefox, and Edge, you’d be all good.

But in Safari (also iOS), you’d not be good.

I’ll see if i can get him to come into the office since he’s local and show me what he’s seeing.

Thanks everyone!

This will be what he’s seeing…

Yeah I see that too, but getting him in here with his equipment will allow me to explain the problems with out of date versions and update his software. Hopefully that’ll take care of it.

There probably is no more recent version of Safari because Apple abandoned it - so you’ll need to decide which browser to swap him to.

You can add an image gradient before the css gradient as a fall-back for old browsers if you need to support them. But Safari for Windows is a dead browser, one that no one should waste time trying to cater for. The client needs to get a modern browser, Chrome, Firefox, Edge, anything will be better than that.

Safari for Windows is an old browser, if you want to get rid of it then get a modern browser like Chrome, Firefox, Edge, anything will be better than that.

As others have said safari on the PC is dead and should not be used because apart from the fact that is its a very old and dead browser and will support little css3 it will also be a security issue because it is not maintained. Users should remove it from their system as it has no viable use these days.

Notwithstanding the above the problem with your code is that safari 5.1 on the PC doesn’t understand the new linear gradient syntax (because it wasn’t around then) and you would need to use the prefixed version.

The above is tested and working in safari PC (I have it installed an an old machine that I don’t use anymore).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Advanced effects with CSS background blend modes

If a picture is worth a thousand words, then blending two pictures together must be worth many times that. Likewise, the design possibilities that open up with the availability of blend modes in CSS are likely greater than you realize.

When you hear CSS Blend Modes being talked about, the commotion is really about three new CSS properties that have gained fairly good support in modern browsers.

These properties include:

• background-blend-mode , for blending an element’s background images, gradients, and background colors
• mix-blend-mode , for blending elements over other elements, and lastly
• isolation , a lesser used property used with mix-blend-mode for keeping elements from mixing together.

However, this article will focus on background-blend-mode , the property with the most widespread support, and how you can use it today to create eye-catching backgrounds and photo effects for your website that once were only possible in Photoshop.

Combining CSS gradients with background-blend-mode

The background property is where we can use CSS gradients. Functions like linear-gradient() , radial-gradient() , and the repeating-linear-gradient() and repeating-radial-gradient() varieties of the two have widespread support and more critically, a standardized syntax across browsers.

But the background property can also accept more than one gradient rendered on top of each other, with each function separated by a comma. Lea Verou showcased impressive patterns that can be created with this technique, from checkerboards, to bricks, to stars.

But now that we have the background-blend-mode property, we can create even more new gradients and patterns.

Spectrum background

Let’s overlay three gradients to make a background with nearly the full spectrum of colors that can be displayed on a monitor.

The effect above used to only be possible with an image, weighing in at many tens of kilobytes. But we’ve just reproduced the effect with CSS in less than 200 bytes, not to mention saving an HTTP request as well.

Plaid background

We can also create some interesting plaid patterns with gradients and background-blend-mode .

Circles background

How about one more, this time with a radial gradient:

More backgrounds

With the help of Yoksel and Una Kravets, I’ve prepared a collection of 24 more blend mode gradients to make your website fast and attractive looking.

Photo effects with background-blend-mode

While background-image allows us to set multiple gradients on an element, one trick is that we can also set multiple image backgrounds with the url() syntax in much the same way. When we combine that with background-blend-mode and properties like filter , that’s where things can get really interesting.

Pencil sketch effect

We can use CSS to make a photograph on the left look like it was sketched with pencil and paper. No Photoshop, no HTML5 canvas, no WebGL, no Javascript libraries. Five CSS properties is all we need.

Over 200k developers use LogRocket to create better digital experiences

Although we can use other block-level elements like <body> , <section> , <figure> , here’s the HTML we’ll use to get started.

Let’s start styling. Replace chapel.jpg with the url of the image you are using. We will set the background image twice and its background-size to cover .

Below in the first square is the result of our first step:

Now let’s add in a blend mode:

Oh no, where did everything go? We are left with a completely black square. The difference blend mode takes the two backgrounds and subtracts pixel by pixel the darker color of one background from the lighter color of the other background.

If it’s confusing what is going on here, let’s see what happens when we offset the two backgrounds ever so slightly with background-position and calc() .

Using a comma, we set two background positions, each corresponding to one copy of the background image. The first image, we move from the center on the x-axis to the left by one pixel, and from the center on the y-axis, upwards by a pixel. For the second copy of the background image, we do the opposite, moving down and to the right.

What we are left with is two background images that are slightly offset but the whole picture is still centered in our element. Now that the difference blend mode finds the differences between the two images, it reveals the edges in the photo. Pretty cool?

Lastly, we will use the filter property to invert the photo and make it grayscale.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

For this specific photo, we will also boost the brightness, which has the secondary effect of increasing the contrast of the lines.

Here’s our final snippet of CSS for this effect:

Chalkboard effect

We can recreate a chalkboard effect by following the steps for the pencil sketch effect, while omitting the invert(1) function on the final step.

Night vision effect

Let’s try to recreate one more effect with CSS blend modes and make a photo appear like we are viewing it through the lens of night vision goggles.

There are three parts to our background that we will blend together with the overlay blend mode. This blend mode both lightens and darkens a background and works as a combination of two other blend modes, multiply and screen .

First we will setup our background image, just once this time.

Now let’s add in a gradient and background-blend-mode. The we are using a slightly transparent lime to black radial gradient here.

Not too bad, maybe we want to stop there. I have one more idea that might make the effect look more authentic, and that is to add some faux scan lines to the background with a repeating background gradient.

And to wrap it up, the full CSS used for this effect:

More photo effects

I’ve made a gallery of 20 CSS image effects you can use on your website.

Browser support and graceful Degradation

The good news is that the background-blend-mode property has full support in Firefox, Chrome, and Opera.

The somewhat good news is that it has enough support in Safari to support all the effects we’ve overviewed here, while Safari currently lacks support for the saturation , hue , color , and luminosity blend modes.

The bad news is that Internet Explorer and IE Edge have no support for any CSS blend mode properties.

This means we need to plan ahead for browsers that do not yet support background-blend-mode . The nifty CSS @supports rule makes that pretty easy. Here’s two examples.

For the first example, we will take our spectrum background gradient and provide a fallback if the background-blend-mode property isn’t supported. We are using background: gray; for this example as a fallback, but any CSS can be used in its place.

And here’s the pencil sketch effect with a fallback. We are testing for two crucial properties we need support for for the effect: filter and background-blend-mode . If a user’s browser doesn’t support those (or if the browser doesn’t support CSS @supports for that matter), we will fallback to the plain original photograph.

Blending Modes Demystified by Justin McDowell

Basics of CSS Blend Modes by Chris Coyier

CSS3 Patterns Gallery by Lea Verou

Una Kravets’ 6-part CSS Image Effects Series

Can I use… Support for background-blend-mode

Image Effects with CSS by Bennett Feely

New CSS Gradient possibilities with the background-blend-mode property by Bennett Feely

Experimental Polyfill for background-blend-mode by Rik Cabanier

Compositing and Blending Level 1 Specification by the W3C

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Signals vs. ngOnChanges for better Angular state management

Angular is evolving in some exciting ways. Explore how signals enhance state management compared to the “old” approach using ngOnChanges .

An advanced guide to Vitest testing and mocking

Use Vitest to write tests with practical examples and strategies, covering setting up workflows, mocking, and advanced testing techniques.

Optimizing rendering in Vue

This guide covers methods for enhancing rendering speed in Vue.js apps using functions and techniques like `v-once`, `v-for`, `v-if`, and `v-show`.

Using Google Magika to build an AI-powered file type detector

Magika offers extremely accurate file type identification, using deep learning to address the limitations of traditional methods.

Leave a Reply Cancel reply

• Joomla Templates
• WordPress Themes
• Page Builder
• YOOtheme Pro
• Warp Themes

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode .

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to [email protected] .

Linear gradients and ios safari.

• Oldest to Newest
• Newest to Oldest
• Reply as topic

I have a couple of SVGs that have linear gradients on them for a 3D-ish effect. All works well until I view the page on my Iphone, The gradients just go black. Safari on my Mac works perfectly. I have tried importing the demo SVG from SVGOMG https://jakearchibald.github.io/svgomg/ and I have the same problem.

any advice is appreciated.

I can't really help much other than to say to Google it. Its definitely a pain trying to support Safari, especially on iOS as you can't get away from it. Chrome on iOS still uses the Safari rendering engine.

https://stackoverflow.com/questions/11303740/svg-linear-gradient-doesnt-work-in-safari https://stackoverflow.com/questions/48178112/svg-linear-gradient-is-not-working-in-safari

Developer at Radix IoT

Thxs, I've been googling for days now. Cant find anything was hoping someone else ran into the problem here. Will post back if I find a solution...

@Jared-Wiltshire

The two directives reference the image differently, <ma-switch-img> simply uses a <img> tag internally and sets its src attribute. <ma-svg> embeds the contents of the SVG into the page. This definitely points to the SVG not being able to reference its gradients correctly once its embedded, I'd play around with moving the <linearGradient> into a <defs> tag inside the SVG as per the stack overflow link I posted.

• First post Last post Go to my next post