skip navigation

Gradient Experiments

Tagged in: backgrounds , gradients , colour , animation
Grouped in: animation , gradients

A repeating-radial-gradient has it’s colours alternate over a 0.15s period. There are two background gradients so they can’t transition smoothly. One way to do this would be to change the opacity of the top one. Opacity is a number based property that can be transitioned smoothly.

Epilepsy

Below the background-clip property is set to text while an oversized repeating-linear-gradient background is moved from left to right.

Animate 
div {
    color: transparent;
    line-height: 1;
    background-image: repeating-linear-gradient(-45deg, fuchsia 0 20px, blue 20px 50px );
    background-clip: text;
    background-size: 300%;
    background-position: 300% 0;
    overflow: hidden;
    animation: left-to-right 96s infinite linear;
}
@keyframes left-to-right {
    to {
        background-position: 0 0;
    } 
}

Note that the blue stripes are thicker than the pink. That’s to compensate for the optical illusion that makes them appear thinner against the lighter pink.

A

So the next zigzag gradient effect uses:

div {
 background-color: #0e0aee;
 background-image:
      linear-gradient(135deg, var(--blue) 25%, transparent 25%),
      linear-gradient(225deg, var(--blue) 25%, transparent 25%),
      linear-gradient(315deg, var(--blue) 25%, transparent 25%),
      linear-gradient(45deg,  var(--blue) 25%, transparent 25%);
  background-position: -50px 0, -50px 0, 0 0, 0 0;
  background-size: 100px 100px;
}
Whoah!!
View the CSS for this page 
.block {
    width: min(100%, 650px);
    aspect-ratio: 16 / 9;
    /* outline: pink dotted 1px; */
}

:root {
    --red: #c11;
    --green: #1a1;
}

.anim {
    background-image:
        repeating-radial-gradient(circle at 50% 100%, var(--red) 0 20px, var(--green) 20px 40px);
    /* animation: anim 2s infinite alternate both; */
    animation: radiate-2 .15s infinite both ease-in-out;
    display: grid;
    place-content: center;
}

.anim h2 {
    color: #fff;
    margin: auto 0;
    text-transform: uppercase;
    animation: burst-forward 0.5s infinite;
}

.zigzag {
    --blue: #05a;
    display: grid;
    place-content: center;
    /* width: 400px; */
    font-family: 'arial black';
    font-size: 3em;
    color: fuchsia;
    background-color: #0e0aee;
    background-image:
        linear-gradient(135deg, var(--blue) 25%, transparent 25%),
        linear-gradient(225deg, var(--blue) 25%, transparent 25%),
        linear-gradient(315deg, var(--blue) 25%, transparent 25%),
        linear-gradient(45deg,  var(--blue) 25%, transparent 25%);
    background-position: 
    -50px 0, -50px 0, 0 0, 0 0;
    background-size: 100px 100px;
    /* background-repeat: round; */
    /* animation: zigzag 1s infinite linear both; */
    outline: double fuchsia 16px;
    outline-offset: -26px;
}


@keyframes radiate-2 {
    0% {
        --red: #c11;
        --green: #1a1;
        background-image: repeating-radial-gradient(circle at 50% 100%, var(--red) 0 20px, var(--green) 20px 40px);
    }


    100% {
        /* --red: #1c1;
        --green: #c11; */
        background-image: repeating-radial-gradient(circle at 50% 100%, var(--green) 0 20px, var(--red) 20px 40px);
    }
}

@keyframes burst-forward {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }

}

.text {
    width: 100%;
    aspect-ratio: initial;
    color: transparent;
    font-family: 'Arial Black', Impact, sans-serif;
    letter-spacing: -3px;
    line-height: 1;
    text-transform: uppercase;
    font-size: clamp(60px, 7vw, 200px);
    background-image: repeating-linear-gradient(-45deg, fuchsia 0 20px, blue 20px 50px);
    background-clip: text;
    background-size: 1600%;
    background-position: 1600% 0;
    overflow: hidden;
    animation: left-to-right 2006s infinite linear both;
}

.text-2 {
    font-size: 800px;
}

@keyframes left-to-right {
    to {
        background-position: 0% 0;
    }
}

@keyframes zigzag {
    to {
        background-position:
        0px 50px, 0px 50px, 50px 50px, 50px 50px;
    }
}
☝