CSS
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
HTML
<h1>Hello World</h1>
I see the 'Hello World' text with the gradient in chrome browser. Even though I add other prefixers such as -moz,-mo I don't see it in firefox or opera or IE. What could be the issue?
Try this
background: $gradient;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
Working on all browsers for me :)
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
You need to add the same for -moz and -o(simone comment)
here you can find an example for linear-gradients.
http://www.the-art-of-web.com/css/linear-gradients/#.UNQ9Ztd2EuM
EDIT
unfortunatly the previous poster is right
-moz-background-clip:text does not work in Firefox
check this. It is an awesome site for the gradient. You can make any gradient for any browser at a same time and it also supports old version of ie.
Related
I just realized, that in Chrome 69 the behavior for -webkit-background-clip: text; changed. It now has the same bug as Edge. When the content is wrapped in paragraphs, the text is invisible.
What I want to achieve is that I have a gradient in the background and transparent text color, so that the color of the gradient comes through. This works in Firefox and used to work in Chrome, but now, in version 69, it no longer works.
Here is a codepen to try it out: https://codepen.io/obs/pen/eLPeYz
When you delete the p tags, it works as supposed to.
Is this a bug in Chrome? How can I get around this?
Yes, this seems to be a bug in Chrome. Others have reported it also: Chrome 69 when using 'transform', '-webkit-background-clip: text' and 'color:transparent' don't work
Also, good practice is to put -webkit-background-clip: text; on an element that has text in it, not on it's parent.
I learned that the bug does not happen when you have nested inline elements. So adjusting obs codepen to use span tags instead of p tags the clipping works.
background: linear-gradient(#131c27, #663b34);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
This works in chrome. just set your gradient and then use the rest of the code in css.
I came here looking to see if anyone else was experiencing trouble webkit-background-clip: text;. I noticed the code for making text gradients worked on text inside buttons but when I applied the same code to h1 text it did not work. After some experimentation I discovered that adding width before the background linear gradient solved the issue for me.
I know these answers are a couple of years old, but should someone like me looks here again, the following worked for me:
<style>
h1 { text-align:center; font-family: 'Italiana', serif;
font-size: 2em; width:50%; background: linear-gradient(
to right, rgba(206, 189, 167, .55), rgba(247, 241, 226,
1), rgba(206, 189, 167, .55));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; padding: 1em 0 1em 0; }
</style>
View my gradient text at: https://palmbeachcuisine.com/#BreakfastandBrunch
So i'm new to using css and im currently working on a forum thats using xenforo. However I thought it'd be neat to see this effect in place of the admins or moderators usernames.
If you guys could help me out or give me some info on how to go about it that'd be great!
Heres a Video of what I mean if you don't know:
https://www.youtube.com/watch?v=XdL9iDQs3t8
Also, I'm trying to do this all in css only for the "User Name CSS" field on xenforo. I'll keep tryig to figure it out but thanks if you can help!
The closest thing to the text in that video, would be to have a rainbow gradient across the entire phrase, not a different colour per letter.
I have created an example here:
.rainbow_text {
display: inline-block;
background: black;
background: linear-gradient(to right, red, orange , yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rainbow_text.animated {
animation: rainbow_animation 5s ease-in-out infinite;
background-size: 400%;
}
#keyframes rainbow_animation {
0%, 100% {
background-position: 0
}
50% {
background-position: 100%
}
}
<h1 class='rainbow_text'>Austen Holland</h1>
<br>
<h1 class='rainbow_text animated'>Austen Holland Animated</h1>
There are two pieces of CSS that make this possible. background-clip / -webkit-background-clip: and color.
When the background-clip property is set to text, the background is painted within (clipped to) the foreground text.
When the color property is set to transparent, the text is.. well.. transparent. That allows the gradient from the background to show through!
There a few catches here though, and that's browser support with background-clip: text;!
Internet explorer does not support it at all, and chrome, opera, safari, android all require the -webkit- vendor prefix. Browsers like edge and firefox support it without the prefix.
I have this: demo
background-image: url('http://colorisrelative.com/wp-content/uploads/2010/08/halation_2color_orangecyan.png');
background-position: 80% 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
I put a background-image under the icons and change the position on hover.
It works perfectly in Chrome, but not in Mozilla or IE (You need to watch the demo in chrome and Moz or IE).
So I need a fallback. I tried the solution of this article but I dont get it to work.
Is there a way to say, use it only in chrome and take a static text color with hover in every other browser?
I appreciate every solution
I want a word in my div to be split in 2 colors vertically using pure CSS, any idea how I can do that?
You can certainly use CSS3 gradient and clip properties .. I am aware of webkits which I used for, but not sure about other browsers, if you want you can try this
Demo (Please view it on chrome)
div {
font: 40px Arial;
background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Note: As a web developer am not using any latest browsers, if you know
any proprietary property which works the same please feel free to edit
my answer
I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (green) background. Here is my code
.menu_body a {
display:block;
color:#006699;
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #0b71a4, #025f8e);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#0b71a4), to(#025f8e));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
padding: 1px 18px;
}
In IE<=7, filters won't work unless element has layout.
zoom: 1;
Be aware that it can break other things, so old good background-image might be safe and reliable solution.
Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.
The correct syntax is:
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)
This is supported by IE4>
See the MSDN source here.
I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:
startColorstr='#0b71a4', endColorstr='#025f8e'
Notice the lower-case starting character, and lower-case str suffix.