css animation gradient examples - Brave Search

How to Animate Gradients using CSS

stackoverflow.com › questions › 23441060 › how-to-animate-gradients-using-css

Please try this code:

#gradient
{
    height:300px;
    width:300px;
    border:1px solid black;
    font-size:30px;
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
    background-size: 200% 200%;

    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s 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%}
}

<html>
<div id="gradient">
  Hello
</div>
</html>

Answer from RP The Designer on Stack Overflow

Gradient-animator

gradient-animator.com

CSS Gradient Animator

.css-selector { background: linear-gradient(270deg); background-size: ; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; -o-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

Slider Revolution

sliderrevolution.com › home › css animated gradient examples to enhance your web design

CSS Animated Gradient Examples To Enhance Your Web Design

September 25, 2024 - Discover stunning CSS animated gradient examples to elevate your web design. Learn smooth transitions, practical tips, and essential techniques.

Discussions

Creating a Modern Gradient Slider with HTML, CSS & a Touch of Animation

More on reddit.com

r/SLIDERS

October 29, 2025

How would one create a moving gradient background like on Stripe.com home page

looks like they are using canvas actually; here is an example I found using a similar technique. https://www.html5canvastutorials.com/advanced/html5-canvas-animated-gradient-background/

Edit:

I also pulled this https://gist.github.com/GuyARoss/d3bf5704c9b4833aa62fd5af525d2d8c from their site.

More on reddit.com

r/css

12

22

August 9, 2020

CSS animation / keyframes not working on iOS 10.2

I've tested the latest version of safari on ios and it works. Try adding the browser prefix and see if it improves: .example { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all .5s; transition: all .5s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: -webkit-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); }.spinner { width: 100px; height: 100px; border-radius: 50%; border: 5px solid #f59338; border-top-color: #FFFFFF; z-index: 9999; -webkit-animation: spinner .9s ease infinite; animation: spinner .9s ease infinite; display: none; margin: auto; } @-webkit-keyframes spinner{ from {-webkit-transform: rotate(0deg);transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } @keyframes spinner{ from {-webkit-transform: rotate(0deg);transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } More on reddit.com

r/web_design

7

1

March 10, 2017

Tips on how to do an animated blurred gradient background? Like that Mac OS Screensaver.

A picture of what you are looking to achieve would be helpful. More on reddit.com

r/Frontend

4

1

October 4, 2018

Videos

Animated Gradient Background with Pure CSS - YouTube

CSS Morphing Gradients Animated Background - YouTube

Transform your designs with stunning CSS gradient animations! - ...

Fun ways to animate CSS gradients - YouTube

We can FINALLY animate gradients with CSS! - YouTube

Animated Gradient Background using HTML CSS | CSS Animation - YouTube

February 21, 2022

stackoverflow.com › questions › 23441060 › how-to-animate-gradients-using-css

html - How to Animate Gradients using CSS - Stack Overflow

Please try this code:

#gradient
{
    height:300px;
    width:300px;
    border:1px solid black;
    font-size:30px;
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
    background-size: 200% 200%;

    -webkit-animation: Animation 5s ease infinite;
    -moz-animation: Animation 5s ease infinite;
    animation: Animation 5s 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%}
}

<html>
<div id="gradient">
  Hello
</div>
</html>

Using CSS variables it's now a trivial task.

Here is a basic example (hover to see the result)

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  cursor:pointer;
  height:200px;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
  --a:360deg;
  --l:40%;
  --c:green;
}

<div class="box"></div>

More details from my article: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

codepen.io › P1N2O › pen › pyBNzX

🌈 Pure CSS Animated Gradient Background

Minimize CSS Editor · Fold All · Unfold All · body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; } @keyframes gradient { 0% { ...

animated-gradient-background-generator.netlify.app

Animated Gradient Background Generator

.gradient-background { background: linear-gradient(300deg,deepskyblue,darkviolet,blue); background-size: 180% 180%; animation: gradient-animation 18s ease infinite; } @keyframes gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { ...

dev.to › afif › we-can-finally-animate-css-gradient-kdk

We can finally animate CSS gradient - DEV Community

November 12, 2024 - Considering this we simply need to use the variables inside the gradient definition and animate them.

Exclusive Addons

exclusiveaddons.com › best elementor addons - exclusive addons › mastering css gradient animation

Mastering CSS Gradient Animation

Our goal is simple: create a gorgeous, multi-color linear gradient that drifts smoothly across the background of an element. This hands-on walkthrough will give you the foundational skills to start experimenting on your own. First things first, we need a place to put our animation. Any block-level HTML element will do the trick, like a <div> or a <section>. For this example, let's keep it simple with a <div> and give it a class so we can easily target it in our CSS...

Published July 22, 2025

Find elsewhere

Google Bing Mojeek

the-art-of-web.com › css › animated-background-gradients

CSS: Animated Background Gradients

In these examples a simple 'flare' effect is moved across the button: ... The trick seems to be that you need to specifically define a tranisition for each variable as just transition: 0.5s doesn't produce an animation. Here we have set the transition for --f to 0.5s. @property --f { syntax: "<percentage>"; inherits: false; initial-value: 10%; } #gradient_buttons > div { background-image: radial-gradient(circle at var(--f) var(--f), rgba(255,255,255,0.75), rgba(255,255,255,0) 2em); transition: --f 0.5s; } #gradient_buttons > div:hover { --f: 90%; }

Weekend Projects

weekendprojects.dev › posts › creating-a-gradient-animation-with-css

Creating gradient animation with CSS - Articles about design and front end development

April 12, 2022 - I will go through it line by line: body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 5s ease infinite; height: 100vh; } @keyframes gradient { 0% { background-position: ...

blog.hubspot.com › website › css-animated-gradient

How to Use CSS to Make an Animated Gradient

March 13, 2024 - Learn how to create an eye-catching animated gradient background using CSS for your website. Elevate your design and captivate visitors with this dynamic visual experience.

dev.to › gmeben › animating-gradients-with-pure-css-3bi8

Animating Gradients with Pure CSS - DEV Community

July 28, 2020 - In this article, I will demonstrate how to animate gradients in an infinite, linear fashion using not... Tagged with css, html.

web.dev › articles › speedy css tip! animated gradient text

Speedy CSS Tip! Animated Gradient Text | Articles | web.dev

November 4, 2022 - .boujee-text { --bg-size: 400%; --color-one: hsl(15 90% 55%); --color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%; color: transparent; background-clip: text; -webkit-background-clip: text; animation: move-bg 8s infinite linear; }

ibelick.com › blog › create-animated-text-gradient-with-css

Creating an animated text gradient with CSS

May 5, 2023 - span { background: radial-gradient( circle at 100%, #b2a8fd, #8678f9 50%, #c7d2fe 75%, #9a8dfd 75% ); font-weight: 600; background-size: 200% auto; color: #000; background-clip: text; -webkit-text-fill-color: transparent; animation: animatedTextGradient 1.5s linear infinite; } @keyframes animatedTextGradient { to { background-position: 200% center; } } ... background: radial-gradient(...): Creates a radial gradient with a circle at 100%, using the specified color stops.

subvisual.com › blog › posts › continuous-animated-gradients

Subvisual | Continuous animated gradients

October 9, 2023 - You can actually use CSS vars in the gradient, and animate those vars, using the CSS Properties and Values API. You can find some great examples in this blog post.

sitepoint.com › blog › css › quick tip: how to animate text gradients and patterns in css

Quick Tip: How to Animate Text Gradients and Patterns in CSS — SitePoint

April 11, 2024 - In this quick tip, we show how easy it is to add animated background gradients and images to text on the Web, with handy demos.

Melanie Richards

melanie-richards.com › blog › animating-gradients

Fun with animated gradients | Melanie Richards

December 4, 2016 - This effect employs the same general principles as #4, except this time we're animating at a 135deg angle, and the background is scaled to 400% so that the last quarter of the gradient covers the box when the animation ends. The example assumes the callout is at the top of the page. There's a 2 second delay but in production a longer delay (perhaps 5 seconds) would be better to allow the user time to cognitively process the page layout. If your callout is not at the top of a page, you may want hook this animation into a Javascript scroll event (in that case, you could instead use a CSS transition instead of an animation).

freefrontend.com › css-gradient-examples

137 CSS Gradient Examples

4 days ago - The dial dynamically reveals cool-to-warm gradient colors based on the current value, enhancing the physical “feel” of a smart home control panel. ... This is a Skeuomorphic Reversi Radio Button component. It overrides standard browser inputs to create a tactile, three-dimensional interaction mechanism. Its function is to replace flat state changes with physical motion, animating the selection exactly like a two-sided piece flipping over on a board. ... This is a Pure CSS Cute Animal Illustration.

amitmerchant.com › animated-gradient-effect-in-css

Animated gradient text in CSS - Amit Merchant

February 28, 2023 - And we’re doing this animation infinitely. Setting the background-size property to 500% auto ensures that the gradient effect is applied to the entire text. And the background-clip property is set to text to ensure that the gradient effect is applied only to the text and not to the background.

gradient-tool-lovat.vercel.app

Gradient Animator

We cannot provide a description for this page right now

css-tricks.com › the-state-of-changing-gradients-with-css-transitions-and-animations

The State of Changing Gradients with CSS Transitions and Animations | CSS-Tricks

March 26, 2021 - We can use this technique of animating the different custom properties we use inside the gradient function to make the blinds in our initial example close the other way instead of going back.