This question already has answers here:
css text gradient
(6 answers)
Closed 7 months ago.
can someone tell me why my gradient text css didn't work ?
i try to change color text to gradient but the color text still black
.head{
margin-top: 12rem;
text-align: center;
background: -webkit-linear-gradient(280deg, #27c1c3, #dd2dd5);
text-align: center;
-webkit-background-clip: text;
}
<h1 class="head">Hallo</h1>
Add -webkit-text-fill-color property to your text
-webkit-text-fill-color: transparent;
.head{
margin-top: 5rem;
text-align: center;
background: -webkit-linear-gradient(280deg, #27c1c3, #dd2dd5);
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1 class="head">Hallo</h1>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
Improve this question
I have a part of a website that involves text with a gradient inside of it. I have tried searching how to do it but nothing is working for me.
What is the efficient way to do this?
.gradient-text {
background-color: red;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 6em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
}
This will add gradient text to all h1 tags:
HTML:
<h1>Gradient text</h1>
CSS:
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
To add a gradient background, not text:
HTML:
<h1>Gradient background</h1>
CSS:
h1 {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
How to Animate Gradients using CSS
(5 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Original close reason(s) were not resolved
How do I add an animation from plain color to background gradient color when hovered? Possibly when hovered from left to right?
I have this sample code but when hovered it is too instant when changing the colors.
I've tried using these references:
Use CSS3 transitions with gradient backgrounds
Animating Linear Gradient using CSS
But can't seem to figure out how to have an easiest approach for the hover. Other references say to add pseudo after element when hovered, but it seems a bit complicated when using it. Just want to use the hover element when animating the gradient text to it.
How to add a transition with these types of gradient text colors?
SAMPLE CODE:
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition:all 0.4s ease-in-out;
}
.hover-grad-txt:hover {
background-image:linear-gradient(to right, #01A5F8, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<span class="hover-grad-txt">Spear</span>
To animate it, instead of trying to animate the gradient, you could animate it's position.
Let's use a new linear gradient for you background.
It will go from the solid color, then it will be a gradient to your
first color from the gradient, then it will be a gradient to the second color of your gradient.
Something like this:
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
Then you adapt the size to only see the solid color:
background-size: 300% 100%;
And it's position:
background-position: top left;
All you need to do on hover is to move it:
background-position: top left 100%;
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300% 100%;
background-position: top left;
transition:all 1s ease-in-out;
}
.hover-grad-txt:hover {
background-position: top left 100%;
}
<span class="hover-grad-txt">Spear</span>
Using new CSS properties, you could also do it like this:
<!DOCTYPE html>
<html>
<head>
<style>
#property --a {
syntax: '<color>';
inherits: false;
initial-value: #191335;
}
#property --b {
syntax: '<color>';
inherits: false;
initial-value: #191335;
}
.hover-grad-txt {
transition: --a 0.5s, --b 0.5s;
font-size: 100px;
text-align: center;
background-image: linear-gradient(to right, var(--a), var(--b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hover-grad-txt:hover {
--a:#01A5F8;
--b: #01BFD8;
}
</style>
</head>
<body>
<span class="hover-grad-txt">Spear</span>
</body>
</html>
Keep in mind it only works in Chrome. Also, look at this question.
In addition to these answer, you could also utilize #keyframes to specify the animation code. Example here is setting pretty as the #keyframe and placing rgba value with Alpha set to 0 to ensure hovering occurs still. I place crimson color as to see the changes more obvios.
.hover-grad-txt {
background: linear-gradient(to right, crimson, #01A5F8, #01BFD8);
background-size: 200% 200%;
animation: pretty 2s ease-in-out infinite;
background-clip: text;
-webkit-background-clip: text;
transition: color 1s ease-in-out;
font-size: 100px;
}
.hover-grad-txt:hover {
color: rgba(0, 0, 0, 0);
}
#keyframes pretty {
0% {
background-position: left
}
50% {
background-position: right
}
100% {
background-position: left
}
}
<div class="hover-grad-txt">Spear</div>
Been looking for a solution but no prevail, so I thought I'd ask here.
I am trying to apply a linear gradient to the input field as I have for the buttons as seen in this picture.
I have played around with different CSS options but have not been able to succeed.
The best version is where the placeholder is styled, but the input value is not. If I try to style the input value then things go wrong.
And advice would be greatly appreciated.
button{
background-color: dodgerblue;
height: 60px;
width: 60px;
border-radius: 50%;
font-size: 32px
}
button i{
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
input{
background-color: dodgerblue;
height: 60px;
width: 360px;
font-size: 32px
}
input::placeholder{
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*
input:focus {
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
*/
<button><i>X</i></button>
<hr />
<input placeholder="SEARCH"/>
You will need two background layer. One for the text and one for the background-color.
Unfortunately this won't work on Firefox due to known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244
input {
background-color: dodgerblue;
color:transparent;
height: 60px;
width: 360px;
font-size: 32px
}
input::placeholder {
background: linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
input:not(:placeholder-shown) {
background:
linear-gradient(#ffffff70, #ffffff),
dodgerblue;
-webkit-background-clip: text, padding-box;
background-clip: text, padding-box;
-webkit-text-fill-color: transparent;
}
<input placeholder="SEARCH">
For firefox you can consider an extra div for the background:
input {
color:transparent;
height: 60px;
width: 360px;
font-size: 32px;
background: linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.input {
display:inline-block;
background-color: dodgerblue;
}
<div class="input"><input placeholder="SEARCH"></div>
if your trying to set a gradient on the placeholder text,
your best option is to omit or remove the placeholder completely and set another div over the top of the input with your chosen font, and the text gradient.
<div id="InpCont">
<input type="text" id="UsrInp">
<div id="InpOverlay">
<p id="PsudoPlcHlder" class="OverlayTxt" contenteditable="true" onchange="PsudoPlcHlder.value=UsrInp.value" max-length="44">Search</p>
</div>
</div>
#InpCont{
// Position Where you want this element
}
#UsrInp{
position:absolute;
top:8px; left:50%;
transform:translateX(-50%);
width:64%; height:calc(28px + 1.87vh);
background:linear-gradient(-33deg,#ffffff70, #ffffff);
z-index:20;
}
#PsudoPlcHlder{
position:relative;
top:-40px; left:calc(20px + 25%);
width:240px; height:29px; padding:2px;
background:linear-gradient(23deg,red,green,blue);
overflow-x:hidden;
background-clip:text;
color:transparent;
z-index:25;
}
(document.addEventListener('DOMContentLoaded', function(){
const UsrInp = document.getElementById('UsrInp');
const PsudoPlcHlder = document.getElementById('PsudoPlcHlder');
PsudoPlcHlder.addEventListener('click', (function(){
PsudoPlcHlder.innerText = '';
}))
})
Just tried this on my own app and it seems to be working, but i'm not sure about the form submission part as I haven't got it hooked up to a db at the moment, might have to play around with the positioning a bit as I only tested this at the very bottom of my app, but might be a good starting point for you to mess around with.
in testing this, the gradient seems to stretch to fit, however many characters there are even if there like 120, which is a bit weird. will play around with this more and edit later on if I find any better methods..
I would like to overlay a text with pattern.
current text:
desired result:
Here is what I tried:
<p style="background: url(http://i.imgur.com/kODqYvS.jpg);>International experiance</p>
Direct link to pattern picture:
http://i.imgur.com/kODqYvS.jpg
Here you go, exactly how you wanted it: DEMO
<p class="bnd">International experiance</p>
.bnd
{
font-size: 48px;
font-weight: bold;
background: url(http://i.imgur.com/kODqYvS.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Fiddle
h1{color: white; /* Fallback: assume this color ON TOP of image */
background: url(http://i.imgur.com/kODqYvS.jpg) ;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?
h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}
The gradient "disappears" because the text-shadow is on a level above the background.
The text (which is transparent)
The shadow
The background.
We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 10px 10px 11px #fff;
color: transparent;
}
#hello:after {
content: 'Hello World';
}
<h1 id="hello"><div>Hello World</div></h1>
With no extra HTML markup or pseudo elements you can achieve this effect using the filter property and drop-shadow function. This method also works with a background image vs gradient.
h1 {
font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
background-image: linear-gradient(#787878, #484848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(2px 2px #333);
filter: drop-shadow(2px 2px #333);
}
Fiddle: https://jsfiddle.net/eywda89g/
This answer is similar to the answer by #KennyTM above, except his answer has the shadow hard-coded into the CSS, which is not suitable for dynamic text such as in a CMS. Also, his method requires a separate ID for each instance, which would be very tedious if you plan to use this effect a lot. The example below uses a class instead, and allows dynamic text.
Try this:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(teal, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 2px 2px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
And then in your HTML:
<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>
Just make sure that the text in the <div> matches the text in the title attribute.
Here is a Codepen example of this method:
https://codepen.io/mprewitt/pen/gexypd
These answers helped me a lot in getting to my final result. Thank you.
So I figured I would share it. Seeing the colour of my text is light, I needed a darker "border" at the top to make it pop.
Also while 'ems' are harder to work with (as opposed to px), I found that the transition of colours for the text-shadow looks a lot smoother as I wanted to make it a gradient as well :)
Works on Edge, Chrome, Vivaldi and FireFox, a little blurry though.
<h1 class="text3d">Privacy Policy</h1>
.text-3d{
background-image:linear-gradient(to bottom,#f7eb3b 30%,#f5d839 40%,#eead34 50%, #eb9531 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter:
drop-shadow(-0.015em -0.015em 0 #ffff00)
drop-shadow(-0.015em -0.015em 0 #bf290c)
drop-shadow(0 -0.005em 0 #bf290c)
drop-shadow(0.010em 0.025em 0 #bf290c)
drop-shadow(0.015em 0.030em 0 #b6240b)
drop-shadow(0.020em 0.035em 0 #a91d0b)
drop-shadow(0.025em 0.040em 0 #8d0d09)
drop-shadow(0.030em 0.045em 0 #830708)
drop-shadow(0.035em 0.050em 0 #680a07)
drop-shadow(0.01em 0.08em 0.01em rgba(0,0,0,0.10))
}