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.
What is the fix? On the div containing the gradient text,
It solved my problem! Thanks a lot for sharing this =D
I signed up for a forum account just to say thanks. This was driving me insane. Cheers.
THANK YOU! This helped a lot!
@magicmark , would you know if this “quirk” / “bug” could either be 1) noted in Webflow’s documentation or 2) a temporary fix added to Webflow’s default CSS engine?
I don’t know how much else would break, but I do note the workaround is prefixed.
Or does Webflow expect Safari to handle this, while Webflow users need to find this specific forum post and/or read Zell’s blog?
Thanks for sharing TG2. Like others mentioned this issue was driving my crazy.
THANK YOU! I can’t tell you how long I have been trying to fix this problem. I was about to give up and remove gradient text from the site, so this made my day!!
Could you please help me to define where that html should be posted?
Ditto to @Philein ’s question, does anyone know where to place the code?
Which div does this code go? On the text span? or the text content? or a parent div?
And where does it get placed? In the custom attributes section?
Hello, everyone! My apologies. Webflow Forum notifications were in spam: wonder how that happened.
This code is applied to the gradient text div, so whichever div is the gradient text.
Where to put the code: three spots.
- Per page: this can go into the “before the </body> tag” in Page Settings
- Per page: this can also go into a custom embed block (make sure you keep the tags)
- Per-site: Head to your site settings, Custom Code, and drop it into Footer Code
It is not critical (e.g,. just CSS) so the <head> box isn’t appropriate. Unfortunately, we are no longer actively maintaining our Webflow site, so I haven’t had much chance to see if this has been fixed or not, or if there’s a better way, but it is still functioning on the client’s old Webflow site.
Related Topics
Search code, repositories, users, issues, pull requests...
Provide feedback.
We read every piece of feedback, and take your input very seriously.
Saved searches
Use saved searches to filter your results more quickly.
To see all available qualifiers, see our documentation .
- Notifications
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Safari CSS gradient bug #14311
valtism commented Jul 23, 2021
- ❤️ 2 reactions
github-actions bot commented Jul 23, 2021
Sorry, something went wrong.
rt4914 commented Jul 23, 2021
rt4914 commented Jul 24, 2021 • edited
Valtism commented jul 24, 2021, rt4914 commented jul 24, 2021.
Successfully merging a pull request may close this issue.
Safari CSS Visual Effects Guide
- Table of Contents
- Jump To…
- Download Sample Code
Using Gradients
Use gradients as color fills that blend smoothly from one color to another. Use a CSS gradient anywhere that you can use an image, such as for the background of an element, an element border, or a mask. Because gradients are resolution-independent and compact, a line or two of CSS can replace hundreds of kilobytes—or even megabytes—of graphic imagery. Unlike graphic images, gradients have no inherent size, and automatically expand to fill a container.
To create a gradient, specify a starting color and an ending color, and optionally intermediate colors and a direction. Safari supports two types of CSS gradients: linear and radial. This chapter describes both types of gradients. Safari 5.1 on the desktop and Safari on iOS 5.0 use the -webkit- prefix for specifying gradients, but otherwise conform to the 17 February 2011 working draft for CSS3 gradients: http://dev.w3.org/csswg/css3-images/ .
Creating Linear Gradients
A linear gradient defines a color change along a specified line. Each point on the line has a particular color. The width of the line, perpendicular to the direction of the line, extends to the edges of the gradient’s container. You can use a linear gradient to fill any two-dimensional shape. By default, a linear gradient changes colors from top to bottom. For example:
background: -webkit-linear-gradient(aqua, white)
defines a linear gradient that starts as aqua at the top of the element and ends as white at the bottom of the element. The gradient fills the element completely, as Figure 1-1 illustrates.
If you specify intermediate colors between the starting and ending color, the gradient blends from color to color. For example:
background: -webkit-linear-gradient(red, yellow, orange, green, blue, purple);
defines a rainbow gradient as a background. Apply this style to a div element, and the element is drawn with a rainbow background, as Figure 1-2 illustrates.
Setting the Direction of Change
You can define a linear gradient with the color change going in any direction: from any edge or corner to its opposite edge or corner, or at any specified angle. To specify a direction from edge-to-edge or corner-to-corner, just specify the beginning edge or corner. For example:
background: -webkit-linear-gradient(left, black, white);
creates a horizontal gradient going from left to right.
background: -webkit-linear-gradient(bottom right, black, white);
creates a diagonal gradient from bottom right to top left.
You can also specify color change direction by supplying an angle. Angles are given in degrees, with 0deg being straight up and proceeding counterclockwise-positive so that 90deg is horizontal left and 180deg is straight down. For example:
-webkit-linear-gradient(45deg, black, white)
creates a gradient at a 45 degree angle up and to the left.
Figure 1-3 shows a diagonal gradient starting at the bottom left corner.
Setting the Rate of Change
By default, the rate of color change for a gradient remains constant; if the gradient has three colors, the blend starts with the first color at 0% of the gradient length, reaches the second color at 50% of the gradient length, and reaches the third color at 100% of the gradient length. In other words, the first line of the gradient is the starting color, the middle line is the second color, and the last line is the third color. To modify this behavior, specify color stops. For example, the following snippet creates a gradient that changes gradually from white to cornflower blue over 90% of the gradient length and then blends quickly from to black over the remaining 10%:
-webkit-linear-gradient(left, white, cornflowerblue 90%, black)
Figure 1-4 shows such a gradient.
Color stops can create some striking effects. For example, specify the same color at two consecutive stops to create a band of solid color, or specify two different colors at the same percentage point to create an abrupt change in color. Figure 1-5 shows the effect these kind of color stops create.
Creating Gradient Fades
Use RGBa colors in a gradient to soften or fade colors into the background by decreasing the alpha value of the gradient. For example, Listing 1-1 creates a div element with a white background that fades to transparent. Two consecutive white color stops are used, so the div element’s background stays white for 50% of its width and then fades into the background of the element’s parent. Figure 1-6 shows the result.
Listing 1-1 Linear fade
Creating Radial Gradients
A radial gradient is a color fill that blends from one color to another with the color change proceeding radially, forming a disk clipped by the shape of the element. The disk can be a circle or an ellipse. Specify a starting and ending color, and optionally specify intermediate colors. The starting color begins at the center of the disk, and the color change proceeds outward until the ending color is reached, by default at the farthest corner of the element being filled.
By default, a radial gradient is an ellipse the height and width of the element being filled, with the center of the ellipse at the center of the element being filled. For example, the following snippet creates a radial gradient that blends from white at the center of a div element to black at the element’s outer edges, as Figure 1-7 illustrates:
<div style="background: -webkit-radial-gradient(white,black);">
To create a circular gradient, pass in the circle parameter:
-webkit-radial-gradient(circle, white, black) .
The circle parameter parameter causes the gradient to be circular, instead of an ellipse that conforms to the shape of the element, as Figure 1-8 illustrates:
Note that the shape of an element clips a circular gradient just as it does an elliptical gradient.
Moving the Center
By default, the starting point of a radial gradient is the center of the element you are filling. Change this behavior by specifying a different starting point, using horizontal or vertical offsets from the element’s top left corner. The following example creates a circular div element (a square div element with a 50% border radius), then fills it with a radial gradient whose center is offset down and to the right of the element’s upper-left corner by 30%, creating a 3D lighting effect, as Figure 1-9 illustrates:
<div style="width: 200px; height: 200px; border-radius: 50%;
background: -webkit-radial-gradient(30% 30%, white, black);">
Notice that you specify the vertical and horizontal offsets are as a distance from the top and left edge of the element, and that you specify both offsets as part of a single comma-delimited parameter, separated by a space. If you specify only a single value, Safari treats it as a vertical offset.
Changing the Ending Color Location
By default, a gradient reaches its ending color at the corner of the element furthest from the specified center of the gradient. Modify this behavior by specifying closest-corner . For example:
-webkit-radial-gradient(30% 10%, closest-corner, white, black)
creates a radial gradient that begins 30% to the right and 10% below the upper-left corner of an element, and reaches its end color at the closest corner.
If you specify both the circle and the closest-corner properties, pass them in the same comma-delimited parameter, separated by a space:
-webkit-radial-gradient(30% 10%, circle closest-corner, white, black)
When the gradient ends at the closest corner, the ending color fills the remainder of the element. Figure 1-10 shows examples of identical div elements filled with radial gradients offset 30% down and to the right of the upper-left corner. Elliptical gradients are on the left of the illustration and circular gradients are on the right. Closest-corner gradient fills are above and default gradient fills are below:
Adding Color Stops
To create a multi-colored radial gradient, specify intermediate colors between the starting and ending color. For example, the following snippet creates a radial gradient that blends from white at the center to green half way out, to black at the outer edge, as Figure 1-11 illustrates:
<div style="width: 200px; height: 200px; border-radius: 100px;
background: -webkit-radial-gradient(white, green, black);">
By default, the rate of color change is constant, dividing the gradient into equal-size color blends. Modify this behavior by providing color stops that specify the distance from the gradient center to its edge for particular colors. For example, the following snippet creates a gradient that blends from white to red in just 20% of the gradient, then takes the remaining 80% to fade to black, as Figure 1-12 illustrates:
<div style="background: -webkit-radial-gradient(white, red 20%, black);">
Specify paired color stops of the same color to create bands of solid color, or specify pairs of color stops with different colors at the same percentage point to create abrupt color changes. The following snippet defines two radial gradients, one with two color stops of the same color and the other with two differently colored stops at the same percentage point. Figure 1-13 shows the result:
background: -webkit-radial-gradient(white, red 10%, red 90%, black);
background: -webkit-radial-gradient(white, yellow 20%, red 20%, black);
Creating a Radial Fade
If you use RGBa colors in your color stops, you can specify both the hue and transparency of the gradient at any point. This enables you to create a gradient that blends into the background of its parent element. For example, Listing 1-2 creates a spotlight effect by fading a div element’s background from white to transparent, allowing the parent div ’s background to gradually show through. Figure 1-14 shows the result:
Listing 1-2 Radial fade
Creating Repeating Gradients
You can create a repeating pattern in a gradient in two different ways. One way is to specify a series of repeating color stops. For example, the following snippet creates linear and radial gradients with two repeating red-to-blue-to-red blend stripes:
-webkit-linear-gradient(red, blue 25%, red 50%, blue 75%, red)
-webkit-radial-gradient(red, blue 25%, red 50%, blue 75%, red)
It’s tedious to specify the color stops repeatedly when there are many repetitions, particularly if you need to calculate cumulative percentages for each color stop. To simplify the process, use the repeating gradient properties: -webkit-repeating-linear-gradient and -webkit-repeating-radial-gradient . To create a repeating gradient, specify the first set of color stops with percentages; the gradient repeats the pattern of color stops, keeping the percentages proportional, as needed to reach 100%. The syntax for repeating gradients is otherwise identical to nonrepeating gradients. The following snippet specifies color stops that fill 20% of two gradients, which creates linear and radial gradients with five repeating plum-to-powderblue-to-plum blend stripes, as Figure 1-15 illustrates.
-webkit-repeating-linear-gradient(plum, powderblue 10%, plum 20%)
-webkit-repeating-radial-gradient(plum, powderblue 10%, plum 20%)
Note that the color pattern repeats from the starting color, so if the last color specified is the same as the starting color, the pattern repeats smoothly. If you specify a pattern whose last entry is different from the first entry, the color changes abruptly from the last color to the first color when the pattern repeats, instead of blending smoothly.
Using a Gradient as a Border Image
You can use a gradient anywhere you can use an image—as you would expect, this means you can use a gradient as a border image. However, the syntax is nonobvious. The border-image property uses four values to specify offsets for slicing the image into the top, bottom, and sides of the border. Since a gradient has no inherent size, a pixel or percentage offset into the image is meaningless; the only useful value is 100% .
To make tiles from a linear gradient so that the border edges have the same color everywhere the tiles meet, start and end the gradient with the same color. For example, the following snippet creates a border like the one that Figure 1-16 shows.
<div style="border-width: 50px; border-style: solid;
-webkit-border-image: -webkit-linear-gradient(red, white, red) 100% 100% 100% 100% stretch stretch;">
Radial gradients work nicely as borders, because the outer edges of all the tiles typically match when the stretch value is used for the repeat parameter.
Here is an example of a radial gradient used as a border image:
-webkit-border-image: -webkit-radial-gradient(white,red) 100% 100% 100% 100% stretch stretch;">
Figure 1-17 shows the result.
Prior Syntax (-webkit-gradient)
The -webkit-linear-gradient and -webkit-radial-gradient properties are supported in iOS 5.0 and later, and in Safari 5.1 and later on the desktop. In prior versions of Safari, both linear and radial gradients were implemented using the -webkit-gradient property. If you need to support earlier versions of iOS or Safari, use the -webkit-gradient property to create gradients. The syntax is as follows:
Specify linear gradients using the keyword linear , followed by a starting point, an ending point, a starting color with the keyword from , any color stops, and an ending color with the keyword to .
Linear gradient, vertical from top:
-webkit-gradient(linear, center top, center bottom, from(white), to(black))
Linear gradient, horizontal from left:
-webkit-gradient(linear, center left, center right, from(white), to(black))
Linear gradient, diagonal from upper left:
-webkit-gradient(linear, upper left, lower right, from(white), to(black))
Linear gradient, rainbow:
-webkit-gradient(linear, center left, center right, from(yellow), color-stop(20%, orange), color-stop(40%, red), color-stop(60%, green), color-stop(80%, blue), to(purple))
Specify radial gradients using the keyword radial , followed by a starting point, a starting radius, an ending point, an ending radius, a starting color, any color stops, and an ending color.
Radial gradient, centered:
-webkit-gradient(radial, center center, 0px, center center, 100%, from(white), to(black))
Radial gradient, offset:
-webkit-gradient(radial, 20% 20%, 0px, 20% 20%, 60px, from(white), to(black))
Radial gradient, rainbow:
-webkit-gradient(radial, center center, 0px, center center, 100%, from(yellow), color-stop(20%, orange), color-stop(40%, red), color-stop(60%, green), color-stop(80%, blue), to(purple))
The beginning radius specifies the size of the disk at the center of the gradient. The ending radius specifies the size of the disk at the end of the gradient. The gradient is circular if the beginning and ending center points are the same, elliptical otherwise. The gradient is clipped by the shape of the containing element if the ending radius specifies a larger disk than the element can contain.
Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27
Sending feedback…
We’re sorry, an error has occurred..
Please try submitting your feedback later.
Thank you for providing feedback!
Your input helps improve our developer documentation.
How helpful is this document?
How can we improve this document.
* Required information
To submit a product bug or enhancement request, please visit the Bug Reporter page.
Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.
Safari, gradients, opacity, and broken SVGs
Firefox (expected output)
Safari (unexpected output).
I find myself using Safari when it comes to browsing the web. As I spend some of my time working on PlotAPI , I tend to notice some changes in Safari's SVG support from when it's updated.
For a while, Safari would show artefacts (horizontal lines) on PlotAPI visualisations, and this would be fixed and later re-appear throughout the year.
In the current release of Safari, I'm seeing some new behaviour when working with SVGs, gradients, and opacity.
You can see this for yourself at PlotAPI's Pokémon Types (Gen 1-9) Showcase .
I've noticed this particular issue since the release of macOS Sonoma.
Stay up to date
Get notified when I publish something new, and unsubscribe at any time.
- | New Account
- | Log In Remember [x]
- | Forgot Password Login: [x]
- Format For Printing
- - XML
- - Clone This Bug
- - Top of page
- a. Send us an email
- b. Anonymous form
- Buyer's Guide
- Upcoming Products
- Tips / Contact Us
- Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter
Apple Releases Safari Technology Preview 192 With Bug Fixes and Performance Improvements
Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the Safari Technology Preview to test features that may be introduced into future release versions of Safari.
The current Safari Technology Preview release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.
The Safari Technology Preview update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .
Apple's aim with Safari Technology Preview is to gather feedback from developers and users on its browser development process. Safari Technology Preview can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.
Get weekly top MacRumors stories in your inbox.
Top Rated Comments
Safari 17.5 with MacOS 14.5 scored a 14.2, Safari Tech Preview 192 was 13.3, and the latest Google Chrome was 26.8. Uggg....
"and Performance Improvements" Sooooo...at long last, it's the most snappiest Safari we've ever created. You're going to love it
Popular Stories
When to Expect a New Apple TV to Launch
iPhone 16 Plus Rumored to Come in These 7 Colors
Alleged iPhone 16 Battery Details Show Smaller Capacity for One Model
Macs to Get AI-Focused M4 Chips Starting in Late 2024
Apple Event for New iPads Still Considered 'Unlikely' Following Delays
iOS 18 May Feature All-New 'Safari Browsing Assistant'
Next article.
Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.
App Store changes for the EU, new emoji, Podcasts transcripts, and more.
Get the most out your iPhone 15 with our complete guide to all the new features.
A deep dive into new features in macOS Sonoma, big and small.
Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.
Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.
Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.
Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.
Other Stories
5 hours ago by MacRumors Staff
9 hours ago by Joe Rossignol
9 hours ago by Tim Hardwick
1 day ago by MacRumors Staff
1 day ago by Tim Hardwick
COMMENTS
transparent === rgba(0,0,0,0) So if you have a gradient from transparent to white (or rgba(255,255,255,1) ), for most browsers you're only changing the alpha from 0 to 1 along the gradient. But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys. This drove me crazy for a while.
This article discusses a common issue with gradient animations not working in Safari and provides a potential solution. ... Specifically, Safari has a bug that causes these properties to not work correctly with linear gradients that have an angle value specified. To see this in action, check out the following example:
But in Safari (also iOS), you'd not be good. The element on the left in each browser demonstrates the problem. The problem, the best I understand it, is that transparent is being interpreted (and interpolated) as "transparent black". To fix it, you have to set the color as a fully transparent version of that exact color. Like:
2) In Safari, I am getting a very "cloudy" haze over my images. You have a gradient and a Solid color overlay on the background video element. iOS Safari is reported to not support multiple background-blend-modes. Try to use either one of them only. Gradients can be problematic, I'd go with the solid color.
Hello! I've added some gradients on my site, one to the whole body, another to the div at the bottom. It looks as I inteded in Chrome, but in latest Safari colors are completely different. Seems like a bug? Additionally design question: what is the way to set background gradient to the whole page so it won't interrupt upon scroll? Here are screenshots Chrome at the top vs Safari at the ...
Three weeks ago, Webflow added the CSS background-clip feature live to all users.. On Safari / iOS, multi-line gradient texts and backgrounds in parent divs do not work well with position: inline.This bug has been documented, but seemingly only in the annals of CSS Quirks Volume 54.. I've lost some sleep this past week in finding a fix.
But Safari renders it as. transparent === rgba(0,0,0,0) So if you have a gradient from transparent to white (or rgba(255,255,255,1)), for most browsers you're only changing the alpha from 0 to 1 along the gradient. But for Safari, you're changing the alpha from 0 to 1 and the color from 255 to 0, so you get a gradient of greys.
Environment Information Package version(s): Latest Browser and OS versions: Safari Please provide a reproduction of the bug in a codepen: ProgressIndicator for its indeterminate animation uses a linear-gradient from transparent to neutra...
Safari CSS gradient bug #14311. Closed valtism opened this issue Jul 23, 2021 · 5 comments · Fixed by #14938. Closed Safari CSS gradient bug #14311. valtism opened this issue Jul 23, 2021 · 5 comments · Fixed by #14938. Labels. bug always open for contribution tech: frontend changes will primarily involve frontend technologies.
background: linear-gradient (to right, rgb (245, 245, 245, 0.8), #f5f5f5 65%); Still, it was not working on safari as expected maybe you have figured out the issue, but it took me more than 40 min ...
Transparent Gradients in Safari Heres an easy to fix inconsistency. declaring a transparent stop in a CSS gradient will leave you with a dark band midway. use a rgba color-stop instead.
Firefox 3.6 does render correctly using the following CSS rule: tr { background: -moz-linear-gradient (left top , white, #E8E8E8, white) repeat scroll 0 0 transparent; } According to what I've read the same issue goes for background images on a table row, although I cannot confirm this. Comment 1 Gidon 2010-01-31 03:58:39 PST.
Figure 1-3 shows a diagonal gradient starting at the bottom left corner.. Figure 1-3 Diagonal gradients Setting the Rate of Change. By default, the rate of color change for a gradient remains constant; if the gradient has three colors, the blend starts with the first color at 0% of the gradient length, reaches the second color at 50% of the gradient length, and reaches the third color at 100% ...
For a while, Safari would show artefacts (horizontal lines) on PlotAPI visualisations, and this would be fixed and later re-appear throughout the year. In the current release of Safari, I'm seeing some new behaviour when working with SVGs, gradients, and opacity. You can see this for yourself at PlotAPI's Pokémon Types (Gen 1-9) Showcase.
About External Resources. You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
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. This is what I am doing.
The browser tab crashes when using some specific repeating radial gradient on any element. background-image: repeating-radial-gradient (closest-side circle at 0% 0%, #fff, #000); I think this is because the closest side is equal to the center of the gradient. Any position above zero seems to work (even 0.1%).
Apple's iPhone 16 Plus may come in seven colors that either build upon the existing five colors in the standard iPhone 15 lineup or recast them in a new finish, based on a new rumor out of China.
So this is a bug in Safari. Share. Improve this answer. Follow answered Jul 3, 2012 at 12:04. methodofaction methodofaction. 71.5k 22 22 ... First searching for the defect on linear gradient that did not work as same in safari than other browser, I saw this post first. Second, The topic is related to the safari different behaviour of linear ...
4. My animated gradient is not rendering properly in iOS Safari when referenced from any SVG element other than the one in which it is defined. Everything works as expected in Chrome and Firefox on my laptop. In iOS Safari the second animation appears frozen. Oddly enough when I rotate the display to toggle between portrait and landscape ...