trying to change background gradient smoothly from gold-orange - to orange-gold and vice versa
problem - colors are changed suddenly, jumping from one to another
pls help
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange);
animation: back infinite;
animation-duration: 7s;
}
#keyframes back {
0% {
background: linear-gradient(to right, gold, orange);
}
50% {
background: linear-gradient(to left, gold, orange);
}
100% {
background: linear-gradient(to right, gold, orange);
}
}
<div class='box'></div>
You can increase background-size and use background-position for the animation
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange, gold);
animation: back ease infinite;
animation-duration: 7s;
background-size: 200% 200%;
}
#keyframes back {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
<div class='box'></div>
Related
I can produce moving gradient colors for text like so:
a {
&:hover {
background: linear-gradient(-45deg, green, yellow, red, blue);
background-size: 200% 200%;
animation: gradient 2s ease infinite;
color: transparent;
-webkit-background-clip: text;
}
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Now I have a moving gradient color effect (whose movement unfortunately can't be seen in a screenshot):
Font-Awesome icon color can be changed with the color property, which affects text but -webkit-background-clip: text seems to have no effect on icons.
Example of an icon:
<fa class="icon" :icon="[ 'fa', 'envelope' ]" size="1x"></fa>
Is there any way to do this?
.icn{
font-size: 100px;
}
.color-icon:hover {
background: linear-gradient(-45deg, green, yellow, red, blue);
background-size: 200% 200%;
animation: gradient 2s ease infinite;
color: transparent;
-webkit-background-clip: text;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<i class="fas fa-envelope icn color-icon"></i>
I want to create a square white box with png image in it. I want png to follow background while the colour of box doesn't affect it.
Here is the sample of the output that I want:
As for now, the white background color couldn't work after I added background colour on div for image. I want the transparent space of png follow body background color.
jsfiddle
I've attached snippet too. Can someone help me to look into it? Thanks in advance!
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
background-color:white;
}
.title {
margin-top: auto;
width: auto;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
-webkit-text-fill-color: transparent;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
You need to consider mask here:
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
min-height:100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
}
.title {
margin-top: auto;
-webkit-mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
background: #fff;
}
.title img {
visibility:hidden;
}
<div class="wrapper">
<div class="title">
<img src="https://i.ibb.co/Zcvccd9/print-v1.png" >
</div>
</div>
Here is the solution:
Step 1: Set position: absolute
Step 2: Set the width of the .title
Step 3: add a transparent color in between other colors in the linear background.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
background-color:white;
}
.title {
margin-top: auto;
position: absolute;
width: 97vw;
border: 1px solid black;
background: linear-gradient(-45deg, #ee7752, #ffffff, #3456ab00, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
I am developing an interactive touchscreen at my work which has four tiles on the main screen that look much like the Windows logo. At the moment they are different static colours and they don't look 'alive' and interactive. I want to make them glow or pulsate slightly in random areas and intervals. I thought about creating a white radial gradient and moving it randomly around the outside of each tile so the tile gradient changed, however, I am not sure how to code this in CSS.
I have tried to adapt some copied code that uses radial gradient animations that cycles through the complete hue gradient. The problem with this is I don't want to change the colours because they form the background for text (which can mess with the contrast). The changes can also be rather dramatic, going from a dark colour to very bright, which again messes with the text contrast.
I have already tried a linear gradient but am not happy with it as it is rather predictable and boring (the same gradient going back and forth).
What I am after ideally would be something like this:
Here is a code snippet of what is currently running:
body,html{
margin:0;
padding:0;
height:100%;
}
.box{
height:100%;
width:100%;
}
.gradDynamic{
position:relative;
}
.gradDynamic:after, .gradDynamic:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
z-index:-1;
}
.gradDynamic:after{
background:radial-gradient(circle,red,transparent);
background-size:400%;
animation:colorSpin 30s linear infinite;
}
.gradDynamic:before{
background-color:yellow;
}
#keyframes colorSpin{
25%{background-position:0 100%}
50%{background-position:100% 100%}
75%{background-position:100% 0}
100%{filter:hue-rotate(360deg)}
}
<div class="box gradDynamic"></div>
I have achieved the animated background with linear gradient background. Lets try this example and comment for further assistance.
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4);
background-size: 200% 200%;
-webkit-animation: Animation 8s ease infinite;
-moz-animation: Animation 8s ease infinite;
animation: Animation 8s ease infinite;
}
#-webkit-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#-moz-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
<div class="gradient"></div>
Updated fiddle.
#demo {
width: 100%;
height: 300px;
position: relative;
background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%);
z-index: 2;
}
#demo:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: -1;
}
#demo::after {
background-size: 400%;
background-size: 400%;
animation: colorSpin 40s linear infinite;
background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent);
}
#demo::after {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent);
}
#keyframes colorSpin {
25% {
background-position: 0 100%
}
50% {
background-position: 100% 100%
}
75% {
background-position: 100% 0
}
100% {
filter: hue-rotate(360deg)
}
}
#demo::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #1539b9 0%, #1539b9 100%);
opacity: 0;
animation: bg 2800ms ease-in-out 3s infinite alternate-reverse;
z-index: -1;
}
#keyframes bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="demo">Demo</div>
I have created a div which has a gradient background, and I want to change this gradient. I applied a keyframes animation which changed background color instantly. How can I make this change smooth?
div {
width: 100px;
height: 100px;
background:linear-gradient(red, yellow);
animation-name: colorchange;
animation-duration: 5s;
-webkit-animation-name: colorchange;
animation-iteration-count: 5;
-webkit-animation-duration: 5s;
text-align: center;
}
#keyframes colorchange {
0% {background:linear-gradient(red, yellow) }
35% {background:linear-gradient(yellow, green) }
70% {background:linear-gradient(green, red) }
100%{background:linear-gradient(red, yellow)}
}
<div>
Gradient Background
</div>
Try this
div {
text-align: center;
width: 100px;
height: 90px;
color: #fff;
background: linear-gradient(0deg, red, yellow, green);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
<div> Text </div>
I might be wrong, but gradients don't support transitions.
There's a workaround I found in other related question:
https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
As far as I'm concerned, the smooth transition doesn't work with gradient backgrounds, only with straight colors.
You can create a large gradient background with many colors though, and use the transition to move it. This creates the illusion of the colors changing.
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<h1>Hello World!</h1>
I am looking for a way to overwrite the background color from the top to bottom. More specifically, I would like it to be filled from top to bottom. Currently I have managed to produce a "faded" animation.
This is what I have now:
.page-dark {
background: #003850;
background-color: #003850;
color: white;
-o-animation: fadeIt 3s linear;
animation: fadeIt 3s linear;
}
#-o-keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
#keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
You can create a background with two colors using linear-gradient(). Set the background height to 200% using background-size, and hide one of the colors using background-position. Now animate the background position to show the other color:
.page-dark {
height: 90vh;
background: linear-gradient(to bottom, #003850 50%, #ff711b 50%);
background-size: 100% 200%;
background-position: 0 100%;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-position: 0 0 }
}
<div class="page-dark"></div>
Another option is to set the color you want to hide as the background, animation background-position to show the 2nd background (which we create using linear-gradient()):
.page-dark {
height: 90vh;
background: #ff711b linear-gradient(to bottom, #003850 0, #003850 100%) no-repeat;
background-size: 100% 0;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-size: 100% 100%; }
}
<div class="page-dark"></div>