CSS Gradients

CSS Gradients are pretty great.

I recently wrote Gradient, a mini-module to help generate gradients.

This page generates a number of cool CSS gradients we can drop into any website.

Like most of the rest of this site, this page is experimental and subject to change.

This work will be feeding into a framework, once I Have the excess time.

radial

PowerShell


 gradient '#4488ff' '#224488'

CSS


background-image:radial-gradient(#4488ff, #224488)

radialCircleRepeatingForegroundBackgroundHexagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "circle closest-side at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(circle closest-side at 33% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 66% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem)

radialCircleRepeatingForegroundBackgroundPentagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "circle closest-side at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(circle closest-side at 50% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(circle closest-side at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem)

radialCircleRepeatingFullHexagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "circle closest-side at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(circle closest-side at 33% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(circle closest-side at 66% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(circle closest-side at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(circle closest-side at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(circle closest-side at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(circle closest-side at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem)

radialEllipseRepeatingForegroundBackgroundHexagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 33% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem)

radialEllipseRepeatingForegroundBackgroundPentagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 50% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--background) 20%, transparent) 2rem)

radialEllipseRepeatingForegroundBackgroundTriangle

PowerShell



            $alpha = "$([Math]::Round(100 / 3))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 120           
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 0.01% 99.99%, color-mix(in srgb, var(--foreground) 33%, transparent) 1rem, color-mix(in srgb, var(--background) 33%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 50% 0.01%, color-mix(in srgb, var(--foreground) 33%, transparent) 1rem, color-mix(in srgb, var(--background) 33%, transparent) 2rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 99.99%, color-mix(in srgb, var(--foreground) 33%, transparent) 1rem, color-mix(in srgb, var(--background) 33%, transparent) 2rem)

radialEllipseRepeatingFullHexagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 33% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem)

radialEllipseRepeatingFullPentagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 50% 0.01%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 33% 99.99%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 1rem, color-mix(in srgb, var(--black) 20%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 20%, transparent) 3rem, color-mix(in srgb, var(--red) 20%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 20%, transparent) 5rem, color-mix(in srgb, var(--green) 20%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 20%, transparent) 7rem, color-mix(in srgb, var(--yellow) 20%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 20%, transparent) 9rem, color-mix(in srgb, var(--blue) 20%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 20%, transparent) 11rem, color-mix(in srgb, var(--purple) 20%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 20%, transparent) 13rem, color-mix(in srgb, var(--cyan) 20%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 20%, transparent) 15rem, color-mix(in srgb, var(--white) 20%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 20%, transparent) 17rem, color-mix(in srgb, var(--background) 20%, transparent) 18rem)

radialEllipseRepeatingFullTriangle

PowerShell



            $alpha = "$([Math]::Round(100 / 3))%"
            # $colors = 'foreground','background'
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 120            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 0.01% 99.99%, color-mix(in srgb, var(--foreground) 33%, transparent) 1rem, color-mix(in srgb, var(--black) 33%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 33%, transparent) 3rem, color-mix(in srgb, var(--red) 33%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 33%, transparent) 5rem, color-mix(in srgb, var(--green) 33%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 33%, transparent) 7rem, color-mix(in srgb, var(--yellow) 33%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 33%, transparent) 9rem, color-mix(in srgb, var(--blue) 33%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 33%, transparent) 11rem, color-mix(in srgb, var(--purple) 33%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 33%, transparent) 13rem, color-mix(in srgb, var(--cyan) 33%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 33%, transparent) 15rem, color-mix(in srgb, var(--white) 33%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 33%, transparent) 17rem, color-mix(in srgb, var(--background) 33%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 50% 0.01%, color-mix(in srgb, var(--foreground) 33%, transparent) 1rem, color-mix(in srgb, var(--black) 33%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 33%, transparent) 3rem, color-mix(in srgb, var(--red) 33%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 33%, transparent) 5rem, color-mix(in srgb, var(--green) 33%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 33%, transparent) 7rem, color-mix(in srgb, var(--yellow) 33%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 33%, transparent) 9rem, color-mix(in srgb, var(--blue) 33%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 33%, transparent) 11rem, color-mix(in srgb, var(--purple) 33%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 33%, transparent) 13rem, color-mix(in srgb, var(--cyan) 33%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 33%, transparent) 15rem, color-mix(in srgb, var(--white) 33%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 33%, transparent) 17rem, color-mix(in srgb, var(--background) 33%, transparent) 18rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 99.99%, color-mix(in srgb, var(--foreground) 33%, transparent) 1rem, color-mix(in srgb, var(--black) 33%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 33%, transparent) 3rem, color-mix(in srgb, var(--red) 33%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 33%, transparent) 5rem, color-mix(in srgb, var(--green) 33%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 33%, transparent) 7rem, color-mix(in srgb, var(--yellow) 33%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 33%, transparent) 9rem, color-mix(in srgb, var(--blue) 33%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 33%, transparent) 11rem, color-mix(in srgb, var(--purple) 33%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 33%, transparent) 13rem, color-mix(in srgb, var(--cyan) 33%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 33%, transparent) 15rem, color-mix(in srgb, var(--white) 33%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 33%, transparent) 17rem, color-mix(in srgb, var(--background) 33%, transparent) 18rem)

radialEllipseRepeatingRainbowCorners

PowerShell


   
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 0.01% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem)

radialEllipseRepeatingRainbowOverlap

PowerShell


   
            $alpha = "$(100 / 2)%"
            @(foreach ($vertical in '50%') {
                foreach ($horizontal in '25%', '75%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 25% 50%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem, color-mix(in srgb, var(--yellow) 50%, transparent) 3rem, color-mix(in srgb, var(--green) 50%, transparent) 4rem, color-mix(in srgb, var(--blue) 50%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem, color-mix(in srgb, var(--purple) 50%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 75% 50%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem, color-mix(in srgb, var(--yellow) 50%, transparent) 3rem, color-mix(in srgb, var(--green) 50%, transparent) 4rem, color-mix(in srgb, var(--blue) 50%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem, color-mix(in srgb, var(--purple) 50%, transparent) 7rem)

radialEllipseRepeatingRainbowOverlap8

PowerShell


   
            $alpha = "$(100 / 8)%"
            @(foreach ($vertical in '25%','50%','75%') {
                foreach ($horizontal in '25%', '50%','75%') {
                    if ($horizontal -eq '50%' -and $vertical -eq '50%') {
                        continue
                    }
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 25% 25%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 50% 25%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 75% 25%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 25% 50%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 75% 50%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 25% 75%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 50% 75%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 75% 75%, color-mix(in srgb, var(--red) 12.5%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 12.5%, transparent) 2rem, color-mix(in srgb, var(--yellow) 12.5%, transparent) 3rem, color-mix(in srgb, var(--green) 12.5%, transparent) 4rem, color-mix(in srgb, var(--blue) 12.5%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 12.5%, transparent) 6rem, color-mix(in srgb, var(--purple) 12.5%, transparent) 7rem)

radialEllipseRepeatingRainbowOverlapFourCorners

PowerShell


   
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%','99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 0.01% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem)

radialEllipseRepeatingRainbowVariableFourCorners

PowerShell


   
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%', '99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $vertical $Horizontal"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 0.01% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem)

radialEllipseRepeatingRGBHexagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 33% 0.01%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 0.01%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 50%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 99.99%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 33% 99.99%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 50%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem)

radialEllipseRepeatingRGBPentagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 50% 0.01%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 50%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 66% 99.99%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 33% 99.99%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 0.01% 50%, color-mix(in srgb, var(--red) 20%, transparent) 1rem, color-mix(in srgb, var(--green) 20%, transparent) 2rem, color-mix(in srgb, var(--blue) 20%, transparent) 3rem)

radialEllipseRepeatingRGBTriangle

PowerShell



            $alpha = "$([Math]::Round(100 / 3))%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(ellipse 50% 50% at 0.01% 99.99%, color-mix(in srgb, var(--red) 33%, transparent) 1rem, color-mix(in srgb, var(--green) 33%, transparent) 2rem, color-mix(in srgb, var(--blue) 33%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 50% 0.01%, color-mix(in srgb, var(--red) 33%, transparent) 1rem, color-mix(in srgb, var(--green) 33%, transparent) 2rem, color-mix(in srgb, var(--blue) 33%, transparent) 3rem),
repeating-radial-gradient(ellipse 50% 50% at 99.99% 99.99%, color-mix(in srgb, var(--red) 33%, transparent) 1rem, color-mix(in srgb, var(--green) 33%, transparent) 2rem, color-mix(in srgb, var(--blue) 33%, transparent) 3rem)

radialRainbow

PowerShell


 gradient red orange yellow green blue indigo violet

CSS


background-image:radial-gradient(red, orange, yellow, green, blue, indigo, violet)

radialRainbowVariableFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%','99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "circle closest-side at $horizontal $Vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(circle closest-side at 0.01% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(circle closest-side at 99.99% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(circle closest-side at 0.01% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(circle closest-side at 99.99% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem)

radialRepeating

PowerShell


 gradient repeating-radial '#4488ff 1rem',
        '#224488 2rem'

CSS


background-image:repeating-radial-gradient(#4488ff 1rem, #224488 2rem)

radialRepeatingRainbowVariableCorners

PowerShell


 
            gradient repeating-radial  @(
                'circle closest-side at 0.01% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )


 
            gradient repeating-radial  @(
                'circle closest-side at 99.99% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )

CSS


background-image:repeating-radial-gradient(circle closest-side at 0.01% 0.01%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem, color-mix(in srgb, var(--yellow) 50%, transparent) 3rem, color-mix(in srgb, var(--green) 50%, transparent) 4rem, color-mix(in srgb, var(--blue) 50%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem, color-mix(in srgb, var(--purple) 50%, transparent) 7rem), 
repeating-radial-gradient(circle closest-side at 99.99% 0.01%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem, color-mix(in srgb, var(--yellow) 50%, transparent) 3rem, color-mix(in srgb, var(--green) 50%, transparent) 4rem, color-mix(in srgb, var(--blue) 50%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem, color-mix(in srgb, var(--purple) 50%, transparent) 7rem)

radialRepeatingRainbowVariableFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%', '99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "circle closest-side at $horizontal $Vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-radial-gradient(circle closest-side at 0.01% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(circle closest-side at 99.99% 0.01%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(circle closest-side at 0.01% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem),
repeating-radial-gradient(circle closest-side at 99.99% 99.99%, color-mix(in srgb, var(--red) 25%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 2rem, color-mix(in srgb, var(--yellow) 25%, transparent) 3rem, color-mix(in srgb, var(--green) 25%, transparent) 4rem, color-mix(in srgb, var(--blue) 25%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 6rem, color-mix(in srgb, var(--purple) 25%, transparent) 7rem)

radialRepeatingRainbowVariableOverlap

PowerShell


 
            gradient repeating-radial  @(
                'circle closest-side at 25% 50%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )


 
            gradient repeating-radial  @(
                'circle closest-side at 75% 50%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )

CSS


background-image:repeating-radial-gradient(circle closest-side at 25% 50%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem, color-mix(in srgb, var(--yellow) 50%, transparent) 3rem, color-mix(in srgb, var(--green) 50%, transparent) 4rem, color-mix(in srgb, var(--blue) 50%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem, color-mix(in srgb, var(--purple) 50%, transparent) 7rem), 
repeating-radial-gradient(circle closest-side at 75% 50%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem, color-mix(in srgb, var(--yellow) 50%, transparent) 3rem, color-mix(in srgb, var(--green) 50%, transparent) 4rem, color-mix(in srgb, var(--blue) 50%, transparent) 5rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem, color-mix(in srgb, var(--purple) 50%, transparent) 7rem)

radialRepeatingRGBVariable

PowerShell


 gradient repeating-radial 'var(--red) 1rem',
        'var(--green) 2rem',
        'var(--blue) 3rem'

CSS


background-image:repeating-radial-gradient(var(--red) 1rem, var(--green) 2rem, var(--blue) 3rem)

radialRepeatingRGBVariableOverlap

PowerShell


 
            gradient repeating-radial  @(
                'circle closest-side at 0.01% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 3rem'    
            )


 
            gradient repeating-radial  @(
                'circle closest-side at 99.99% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 3rem'    
            )

CSS


background-image:repeating-radial-gradient(circle closest-side at 0.01% 0.01%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--green) 50%, transparent) 2rem, color-mix(in srgb, var(--blue) 50%, transparent) 3rem), 
repeating-radial-gradient(circle closest-side at 99.99% 0.01%, color-mix(in srgb, var(--red) 50%, transparent) 1rem, color-mix(in srgb, var(--green) 50%, transparent) 2rem, color-mix(in srgb, var(--blue) 50%, transparent) 3rem)

radialRepeatingVariable

PowerShell


 gradient repeating-radial 'var(--blue) 1rem',         
        'var(--brightBlue) 2rem'

CSS


background-image:repeating-radial-gradient(var(--blue) 1rem, var(--brightBlue) 2rem)

radialVariableRainbow

PowerShell


 gradient @(
        'var(--red)'
        'var(--brightYellow)'
        'var(--yellow)'
        'var(--green)'
        'var(--blue)'
        'var(--brightPurple)'
        'var(--purple)'
    )

CSS


background-image:radial-gradient(var(--red), var(--brightYellow), var(--yellow), var(--green), var(--blue), var(--brightPurple), var(--purple))

linear

diagonalLinearRepeating

PowerShell


 
        @(
            'repeating-linear'
            '45deg'
            '#4488ff 1rem'
            '#224488 2rem'
        ) | gradient

CSS


background-image:repeating-linear-gradient(45deg, #4488ff 1rem, #224488 2rem)

linear

PowerShell


 gradient linear '#4488ff' '#224488'

CSS


background-image:linear-gradient(#4488ff, #224488)

linearHorizontalRainbowVariableFullFourCorners

PowerShell



            $alpha = "$(100 / 2)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            @(
                foreach ($horizontal in 'left', 'right') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $horizontal"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )                
                }
            ) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-linear-gradient(to left, color-mix(in srgb, var(--foreground) 50%, transparent) 1rem, color-mix(in srgb, var(--black) 50%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 50%, transparent) 3rem, color-mix(in srgb, var(--red) 50%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 50%, transparent) 5rem, color-mix(in srgb, var(--green) 50%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 50%, transparent) 7rem, color-mix(in srgb, var(--yellow) 50%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 9rem, color-mix(in srgb, var(--blue) 50%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 50%, transparent) 11rem, color-mix(in srgb, var(--purple) 50%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 13rem, color-mix(in srgb, var(--cyan) 50%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 50%, transparent) 15rem, color-mix(in srgb, var(--white) 50%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 50%, transparent) 17rem, color-mix(in srgb, var(--background) 50%, transparent) 18rem),
repeating-linear-gradient(to right, color-mix(in srgb, var(--foreground) 50%, transparent) 1rem, color-mix(in srgb, var(--black) 50%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 50%, transparent) 3rem, color-mix(in srgb, var(--red) 50%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 50%, transparent) 5rem, color-mix(in srgb, var(--green) 50%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 50%, transparent) 7rem, color-mix(in srgb, var(--yellow) 50%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 9rem, color-mix(in srgb, var(--blue) 50%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 50%, transparent) 11rem, color-mix(in srgb, var(--purple) 50%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 13rem, color-mix(in srgb, var(--cyan) 50%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 50%, transparent) 15rem, color-mix(in srgb, var(--white) 50%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 50%, transparent) 17rem, color-mix(in srgb, var(--background) 50%, transparent) 18rem)

linearRainbowVariableFullFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($vertical in 'bottom','top') {
                foreach ($horizontal in 'left', 'right') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-linear-gradient(to left bottom, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem),
repeating-linear-gradient(to right bottom, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem),
repeating-linear-gradient(to left top, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem),
repeating-linear-gradient(to right top, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem)

linearThatchRainbowVariableFull

PowerShell



            $alpha = "$(100 / 4)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            @(
                foreach ($direction in 'right','bottom','left','top') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $direction"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )                
                }
            ) -join (',' + [Environment]::NewLine + (' ' * 2))

CSS


background-image:repeating-linear-gradient(to right, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem),
  repeating-linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem),
  repeating-linear-gradient(to left, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem),
  repeating-linear-gradient(to top, color-mix(in srgb, var(--foreground) 25%, transparent) 1rem, color-mix(in srgb, var(--black) 25%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 25%, transparent) 3rem, color-mix(in srgb, var(--red) 25%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 25%, transparent) 5rem, color-mix(in srgb, var(--green) 25%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 25%, transparent) 7rem, color-mix(in srgb, var(--yellow) 25%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 25%, transparent) 9rem, color-mix(in srgb, var(--blue) 25%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 25%, transparent) 11rem, color-mix(in srgb, var(--purple) 25%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 25%, transparent) 13rem, color-mix(in srgb, var(--cyan) 25%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 25%, transparent) 15rem, color-mix(in srgb, var(--white) 25%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 25%, transparent) 17rem, color-mix(in srgb, var(--background) 25%, transparent) 18rem)

linearVariable

PowerShell


 gradient linear 'var(--blue)' 'var(--brightBlue)'

CSS


background-image:linear-gradient(var(--blue), var(--brightBlue))

linearVariableRainbow

PowerShell


 gradient linear @(
        'var(--red)'
        'var(--brightYellow)'
        'var(--yellow)'
        'var(--green)'
        'var(--blue)'
        'var(--brightPurple)'
        'var(--purple)'
    )

CSS


background-image:linear-gradient(var(--red), var(--brightYellow), var(--yellow), var(--green), var(--blue), var(--brightPurple), var(--purple))

linearVerticalRainbowVariableFullFourCorners

PowerShell



            $alpha = "$(100 / 2)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            @(
                foreach ($vertical in 'top', 'bottom') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )                
                }
            ) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-linear-gradient(to top, color-mix(in srgb, var(--foreground) 50%, transparent) 1rem, color-mix(in srgb, var(--black) 50%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 50%, transparent) 3rem, color-mix(in srgb, var(--red) 50%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 50%, transparent) 5rem, color-mix(in srgb, var(--green) 50%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 50%, transparent) 7rem, color-mix(in srgb, var(--yellow) 50%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 9rem, color-mix(in srgb, var(--blue) 50%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 50%, transparent) 11rem, color-mix(in srgb, var(--purple) 50%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 13rem, color-mix(in srgb, var(--cyan) 50%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 50%, transparent) 15rem, color-mix(in srgb, var(--white) 50%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 50%, transparent) 17rem, color-mix(in srgb, var(--background) 50%, transparent) 18rem),
repeating-linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 50%, transparent) 1rem, color-mix(in srgb, var(--black) 50%, transparent) 2rem, color-mix(in srgb, var(--brightBlack) 50%, transparent) 3rem, color-mix(in srgb, var(--red) 50%, transparent) 4rem, color-mix(in srgb, var(--brightRed) 50%, transparent) 5rem, color-mix(in srgb, var(--green) 50%, transparent) 6rem, color-mix(in srgb, var(--brightGreen) 50%, transparent) 7rem, color-mix(in srgb, var(--yellow) 50%, transparent) 8rem, color-mix(in srgb, var(--brightYellow) 50%, transparent) 9rem, color-mix(in srgb, var(--blue) 50%, transparent) 10rem, color-mix(in srgb, var(--brightBlue) 50%, transparent) 11rem, color-mix(in srgb, var(--purple) 50%, transparent) 12rem, color-mix(in srgb, var(--brightPurple) 50%, transparent) 13rem, color-mix(in srgb, var(--cyan) 50%, transparent) 14rem, color-mix(in srgb, var(--brightCyan) 50%, transparent) 15rem, color-mix(in srgb, var(--white) 50%, transparent) 16rem, color-mix(in srgb, var(--brightWhite) 50%, transparent) 17rem, color-mix(in srgb, var(--background) 50%, transparent) 18rem)

conic

PowerShell


 gradient conic '#4488ff' '#224488'

CSS


background-image:conic-gradient(#4488ff, #224488)

conicRainbowVariableFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            $colors = 'red','brightYellow','yellow',
                'green','blue','brightPurple', 'purple'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$($colorNumber * 42/$colors.Count/2)%"                            
                            $to =  "$(++$colorNumber * 42/$colors.Count/2)%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                            # "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--red) 25%, transparent) 0% 3%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 3% 6%, color-mix(in srgb, var(--yellow) 25%, transparent) 6% 9%, color-mix(in srgb, var(--green) 25%, transparent) 9% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12% 15%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 15% 18%, color-mix(in srgb, var(--purple) 25%, transparent) 18% 21%),
repeating-conic-gradient(from 90deg at 100% 0%, color-mix(in srgb, var(--red) 25%, transparent) 0% 3%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 3% 6%, color-mix(in srgb, var(--yellow) 25%, transparent) 6% 9%, color-mix(in srgb, var(--green) 25%, transparent) 9% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12% 15%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 15% 18%, color-mix(in srgb, var(--purple) 25%, transparent) 18% 21%),
repeating-conic-gradient(from 180deg at 0% 100%, color-mix(in srgb, var(--red) 25%, transparent) 0% 3%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 3% 6%, color-mix(in srgb, var(--yellow) 25%, transparent) 6% 9%, color-mix(in srgb, var(--green) 25%, transparent) 9% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12% 15%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 15% 18%, color-mix(in srgb, var(--purple) 25%, transparent) 18% 21%),
repeating-conic-gradient(from 270deg at 100% 100%, color-mix(in srgb, var(--red) 25%, transparent) 0% 3%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 3% 6%, color-mix(in srgb, var(--yellow) 25%, transparent) 6% 9%, color-mix(in srgb, var(--green) 25%, transparent) 9% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12% 15%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 15% 18%, color-mix(in srgb, var(--purple) 25%, transparent) 18% 21%)

conicRainbowVariableFullFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--foreground) 25%, transparent) 0% 1%, color-mix(in srgb, var(--black) 25%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 25%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 25%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 25%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 25%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 25%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 25%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 25%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 25%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 25%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 25%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 25%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 25%, transparent) 23.61% 25%),
repeating-conic-gradient(from 90deg at 100% 0%, color-mix(in srgb, var(--foreground) 25%, transparent) 0% 1%, color-mix(in srgb, var(--black) 25%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 25%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 25%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 25%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 25%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 25%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 25%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 25%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 25%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 25%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 25%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 25%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 25%, transparent) 23.61% 25%),
repeating-conic-gradient(from 180deg at 0% 100%, color-mix(in srgb, var(--foreground) 25%, transparent) 0% 1%, color-mix(in srgb, var(--black) 25%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 25%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 25%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 25%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 25%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 25%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 25%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 25%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 25%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 25%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 25%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 25%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 25%, transparent) 23.61% 25%),
repeating-conic-gradient(from 270deg at 100% 100%, color-mix(in srgb, var(--foreground) 25%, transparent) 0% 1%, color-mix(in srgb, var(--black) 25%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 25%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 25%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 25%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 25%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 25%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 25%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 25%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 25%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 25%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 25%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 25%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 25%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 25%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 25%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 25%, transparent) 23.61% 25%)

conicRainbowVariableFullHexagon

PowerShell



            $alpha = "$([Math]::Round(100 / 6))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '33% 0%','66% 0%', '100% 50%','66% 100%', '33% 100%', '0% 50%') {                
                gradient repeating-conic  @(
                    "from ${degrees}deg at $position"
                    $colorNumber = 0                        
                    foreach ($color in $colors) {                            
                        $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                        $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                    }
                )
                $degrees += 60
            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 33% 0%, color-mix(in srgb, var(--foreground) 17%, transparent) 0% 1%, color-mix(in srgb, var(--black) 17%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 17%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 17%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 17%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 17%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 17%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 17%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 17%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 17%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 17%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 17%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 17%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 17%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 17%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 17%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 17%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 17%, transparent) 23.61% 25%),
repeating-conic-gradient(from 60deg at 66% 0%, color-mix(in srgb, var(--foreground) 17%, transparent) 0% 1%, color-mix(in srgb, var(--black) 17%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 17%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 17%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 17%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 17%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 17%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 17%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 17%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 17%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 17%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 17%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 17%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 17%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 17%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 17%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 17%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 17%, transparent) 23.61% 25%),
repeating-conic-gradient(from 120deg at 100% 50%, color-mix(in srgb, var(--foreground) 17%, transparent) 0% 1%, color-mix(in srgb, var(--black) 17%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 17%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 17%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 17%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 17%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 17%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 17%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 17%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 17%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 17%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 17%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 17%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 17%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 17%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 17%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 17%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 17%, transparent) 23.61% 25%),
repeating-conic-gradient(from 180deg at 66% 100%, color-mix(in srgb, var(--foreground) 17%, transparent) 0% 1%, color-mix(in srgb, var(--black) 17%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 17%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 17%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 17%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 17%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 17%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 17%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 17%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 17%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 17%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 17%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 17%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 17%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 17%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 17%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 17%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 17%, transparent) 23.61% 25%),
repeating-conic-gradient(from 240deg at 33% 100%, color-mix(in srgb, var(--foreground) 17%, transparent) 0% 1%, color-mix(in srgb, var(--black) 17%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 17%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 17%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 17%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 17%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 17%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 17%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 17%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 17%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 17%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 17%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 17%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 17%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 17%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 17%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 17%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 17%, transparent) 23.61% 25%),
repeating-conic-gradient(from 300deg at 0% 50%, color-mix(in srgb, var(--foreground) 17%, transparent) 0% 1%, color-mix(in srgb, var(--black) 17%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 17%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 17%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 17%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 17%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 17%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 17%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 17%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 17%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 17%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 17%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 17%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 17%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 17%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 17%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 17%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 17%, transparent) 23.61% 25%)

conicRainbowVariableFullPentagon

PowerShell



            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '50% 0%','100% 50%','66% 100%', '33% 100%', '0% 50%') {                
                gradient repeating-conic  @(
                    "from ${degrees}deg at $position"
                    $colorNumber = 0                        
                    foreach ($color in $colors) {                            
                        $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                        $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                    }
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 50% 0%, color-mix(in srgb, var(--foreground) 20%, transparent) 0% 1%, color-mix(in srgb, var(--black) 20%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 20%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 20%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 20%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 20%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 20%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 20%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 20%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 20%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 20%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 20%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 20%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 20%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 20%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 20%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 20%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 20%, transparent) 23.61% 25%),
repeating-conic-gradient(from 72deg at 100% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 0% 1%, color-mix(in srgb, var(--black) 20%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 20%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 20%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 20%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 20%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 20%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 20%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 20%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 20%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 20%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 20%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 20%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 20%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 20%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 20%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 20%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 20%, transparent) 23.61% 25%),
repeating-conic-gradient(from 144deg at 66% 100%, color-mix(in srgb, var(--foreground) 20%, transparent) 0% 1%, color-mix(in srgb, var(--black) 20%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 20%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 20%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 20%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 20%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 20%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 20%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 20%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 20%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 20%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 20%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 20%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 20%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 20%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 20%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 20%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 20%, transparent) 23.61% 25%),
repeating-conic-gradient(from 216deg at 33% 100%, color-mix(in srgb, var(--foreground) 20%, transparent) 0% 1%, color-mix(in srgb, var(--black) 20%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 20%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 20%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 20%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 20%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 20%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 20%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 20%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 20%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 20%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 20%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 20%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 20%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 20%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 20%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 20%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 20%, transparent) 23.61% 25%),
repeating-conic-gradient(from 288deg at 0% 50%, color-mix(in srgb, var(--foreground) 20%, transparent) 0% 1%, color-mix(in srgb, var(--black) 20%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 20%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 20%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 20%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 20%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 20%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 20%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 20%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 20%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 20%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 20%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 20%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 20%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 20%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 20%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 20%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 20%, transparent) 23.61% 25%)

conicRainbowVariableFullTriangle

PowerShell



            $alpha = "$([Math]::Round(100 / 3))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {    
                gradient repeating-conic  @(
                    "from ${degrees}deg at $position"
                    $colorNumber = 0                        
                    foreach ($color in $colors) {                            
                        $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                        $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                    }
                )
                $degrees += 120
            
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 0.01% 99.99%, color-mix(in srgb, var(--foreground) 33%, transparent) 0% 1%, color-mix(in srgb, var(--black) 33%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 33%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 33%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 33%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 33%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 33%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 33%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 33%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 33%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 33%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 33%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 33%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 33%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 33%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 33%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 33%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 33%, transparent) 23.61% 25%),
repeating-conic-gradient(from 120deg at 50% 0.01%, color-mix(in srgb, var(--foreground) 33%, transparent) 0% 1%, color-mix(in srgb, var(--black) 33%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 33%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 33%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 33%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 33%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 33%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 33%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 33%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 33%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 33%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 33%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 33%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 33%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 33%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 33%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 33%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 33%, transparent) 23.61% 25%),
repeating-conic-gradient(from 240deg at 99.99% 99.99%, color-mix(in srgb, var(--foreground) 33%, transparent) 0% 1%, color-mix(in srgb, var(--black) 33%, transparent) 1.39% 3%, color-mix(in srgb, var(--brightBlack) 33%, transparent) 2.78% 4%, color-mix(in srgb, var(--red) 33%, transparent) 4.17% 6%, color-mix(in srgb, var(--brightRed) 33%, transparent) 5.56% 7%, color-mix(in srgb, var(--green) 33%, transparent) 6.94% 8%, color-mix(in srgb, var(--brightGreen) 33%, transparent) 8.33% 10%, color-mix(in srgb, var(--yellow) 33%, transparent) 9.72% 11%, color-mix(in srgb, var(--brightYellow) 33%, transparent) 11.11% 12%, color-mix(in srgb, var(--blue) 33%, transparent) 12.5% 14%, color-mix(in srgb, var(--brightBlue) 33%, transparent) 13.89% 15%, color-mix(in srgb, var(--purple) 33%, transparent) 15.28% 17%, color-mix(in srgb, var(--brightPurple) 33%, transparent) 16.67% 18%, color-mix(in srgb, var(--cyan) 33%, transparent) 18.06% 19%, color-mix(in srgb, var(--brightCyan) 33%, transparent) 19.44% 21%, color-mix(in srgb, var(--white) 33%, transparent) 20.83% 22%, color-mix(in srgb, var(--brightWhite) 33%, transparent) 22.22% 24%, color-mix(in srgb, var(--background) 33%, transparent) 23.61% 25%)

conicRepeating

PowerShell


 gradient repeating-conic '#4488ff 0% 5%',
        '#224488 5% 10%'

CSS


background-image:repeating-conic-gradient(#4488ff 0% 5%, #224488 5% 10%)

conicRepeatingColorMix

PowerShell


 
        gradient repeating-conic 'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'

CSS


background-image:repeating-conic-gradient(color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%, color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%)

conicRepeatingFromCorners

PowerShell


 gradient repeating-conic 'from 0deg at 0% 0%',
                '#4488ff99 0% 2.5%',
                '#22448899 2.5% 5%'


 gradient repeating-conic 'from 180deg at 100% 0%',
            '#4488ff99 0% 2.5%',
            '#22448899 2.5% 5%'

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, #4488ff99 0% 2.5%, #22448899 2.5% 5%), 
repeating-conic-gradient(from 180deg at 100% 0%, #4488ff99 0% 2.5%, #22448899 2.5% 5%)

conicRepeatingOverlap

PowerShell


 gradient repeating-conic 'from 0deg at 25% 50%',
                '#4488ff99 0% 5%',
                '#22448899 5% 10%'


 gradient repeating-conic 'from 180deg at 75% 50%',
            '#4488ff99 0% 5%',
            '#22448899 5% 10%'

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, #4488ff99 0% 5%, #22448899 5% 10%), 
repeating-conic-gradient(from 180deg at 75% 50%, #4488ff99 0% 5%, #22448899 5% 10%)

conicRepeatingRainbowOverlap

PowerShell


 gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 2%',
            'color-mix(in srgb, orange 50%, transparent) 2% 4%',
            'color-mix(in srgb, yellow 50%, transparent) 4% 6%',
            'color-mix(in srgb, green 50%, transparent) 6% 8%',
            'color-mix(in srgb, blue 50%, transparent) 8% 10%',
            'color-mix(in srgb, indigo 50%, transparent) 10% 12%',
            'color-mix(in srgb, violet 50%, transparent) 12% 14%'


 gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 2%',
            'color-mix(in srgb, orange 50%, transparent) 2% 4%',
            'color-mix(in srgb, yellow 50%, transparent) 4% 6%',
            'color-mix(in srgb, green 50%, transparent) 6% 8%',
            'color-mix(in srgb, blue 50%, transparent) 8% 10%',
            'color-mix(in srgb, indigo 50%, transparent) 10% 12%',
            'color-mix(in srgb, violet 50%, transparent) 12% 14%'

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, color-mix(in srgb, red 50%, transparent) 0% 2%, color-mix(in srgb, orange 50%, transparent) 2% 4%, color-mix(in srgb, yellow 50%, transparent) 4% 6%, color-mix(in srgb, green 50%, transparent) 6% 8%, color-mix(in srgb, blue 50%, transparent) 8% 10%, color-mix(in srgb, indigo 50%, transparent) 10% 12%, color-mix(in srgb, violet 50%, transparent) 12% 14%), 
repeating-conic-gradient(from 180deg at 75% 50%, color-mix(in srgb, red 50%, transparent) 0% 2%, color-mix(in srgb, orange 50%, transparent) 2% 4%, color-mix(in srgb, yellow 50%, transparent) 4% 6%, color-mix(in srgb, green 50%, transparent) 6% 8%, color-mix(in srgb, blue 50%, transparent) 8% 10%, color-mix(in srgb, indigo 50%, transparent) 10% 12%, color-mix(in srgb, violet 50%, transparent) 12% 14%)

conicRepeatingRainbowVariableCorners

PowerShell


 gradient repeating-conic 'from 0deg at 0% 0%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'


 gradient repeating-conic 'from 180deg at 100% 0%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--red) 50%, transparent) 0% 2%, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%, color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%, color-mix(in srgb, var(--green) 50%, transparent) 6% 8%, color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%, color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%, color-mix(in srgb, var(--purple), transparent) 12% 14%), 
repeating-conic-gradient(from 180deg at 100% 0%, color-mix(in srgb, var(--red) 50%, transparent) 0% 2%, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%, color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%, color-mix(in srgb, var(--green) 50%, transparent) 6% 8%, color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%, color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%, color-mix(in srgb, var(--purple), transparent) 12% 14%)

conicRepeatingRainbowVariableOverlap

PowerShell


 gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'


 gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, color-mix(in srgb, var(--red) 50%, transparent) 0% 2%, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%, color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%, color-mix(in srgb, var(--green) 50%, transparent) 6% 8%, color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%, color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%, color-mix(in srgb, var(--purple), transparent) 12% 14%), 
repeating-conic-gradient(from 180deg at 75% 50%, color-mix(in srgb, var(--red) 50%, transparent) 0% 2%, color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%, color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%, color-mix(in srgb, var(--green) 50%, transparent) 6% 8%, color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%, color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%, color-mix(in srgb, var(--purple), transparent) 12% 14%)

conicRepeatingRGB

PowerShell



        gradient repeating-conic @(
            'red 0% 5%',
            'green 5% 10%'   
            'blue 10% 15%'
        )

CSS


background-image:repeating-conic-gradient(red 0% 5%, green 5% 10%, blue 10% 15%)

conicRepeatingRGBOverlap

PowerShell


 gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 5%',
            'color-mix(in srgb, green 50%, transparent) 5% 10%',
            'color-mix(in srgb, blue 50%, transparent) 10% 15%'


 gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 5%',
            'color-mix(in srgb, green 50%, transparent) 5% 10%',
            'color-mix(in srgb, blue 50%, transparent) 10% 15%'

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, color-mix(in srgb, red 50%, transparent) 0% 5%, color-mix(in srgb, green 50%, transparent) 5% 10%, color-mix(in srgb, blue 50%, transparent) 10% 15%), 
repeating-conic-gradient(from 180deg at 75% 50%, color-mix(in srgb, red 50%, transparent) 0% 5%, color-mix(in srgb, green 50%, transparent) 5% 10%, color-mix(in srgb, blue 50%, transparent) 10% 15%)

conicRepeatingRGBVariableOverlap

PowerShell


 gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--green) 50%, transparent) 5% 10%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 10% 15%'


 gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--green) 50%, transparent) 5% 10%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 10% 15%'

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, color-mix(in srgb, var(--red) 50%, transparent) 0% 5%, color-mix(in srgb, var(--green) 50%, transparent) 5% 10%, color-mix(in srgb, var(--blue) 50%, transparent) 10% 15%), 
repeating-conic-gradient(from 180deg at 75% 50%, color-mix(in srgb, var(--red) 50%, transparent) 0% 5%, color-mix(in srgb, var(--green) 50%, transparent) 5% 10%, color-mix(in srgb, var(--blue) 50%, transparent) 10% 15%)

conicRepeatingVariable

PowerShell


 gradient repeating-conic 'var(--blue) 0% 5%',
        'var(--brightBlue) 5% 10%'

CSS


background-image:repeating-conic-gradient(var(--blue) 0% 5%, var(--brightBlue) 5% 10%)

conicRepeatingVariableCorners

PowerShell


 gradient repeating-conic 'from 0deg at 0% 0%',
                'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
                'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'


 gradient repeating-conic 'from 180deg at 100% 0%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%, color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%), 
repeating-conic-gradient(from 180deg at 100% 0%, color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%, color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%)

conicRepeatingVariableFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            $colors = 'blue','brightBlue'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--blue) 25%, transparent) 0% 12%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 12.5% 25%),
repeating-conic-gradient(from 90deg at 100% 0%, color-mix(in srgb, var(--blue) 25%, transparent) 0% 12%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 12.5% 25%),
repeating-conic-gradient(from 180deg at 0% 100%, color-mix(in srgb, var(--blue) 25%, transparent) 0% 12%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 12.5% 25%),
repeating-conic-gradient(from 270deg at 100% 100%, color-mix(in srgb, var(--blue) 25%, transparent) 0% 12%, color-mix(in srgb, var(--brightBlue) 25%, transparent) 12.5% 25%)

conicRepeatingVariableOverlap

PowerShell


 gradient repeating-conic 'from 0deg at 25% 50%',
                'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
                'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'


 gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%, color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%), 
repeating-conic-gradient(from 180deg at 75% 50%, color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%, color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%)

conicRGBVariableCorners

PowerShell



            $alpha = "$(100 / 2)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '0%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 180
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--red) 50%, transparent) 0% 8%, color-mix(in srgb, var(--green) 50%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 50%, transparent) 16.67% 25%),
repeating-conic-gradient(from 180deg at 100% 0%, color-mix(in srgb, var(--red) 50%, transparent) 0% 8%, color-mix(in srgb, var(--green) 50%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 50%, transparent) 16.67% 25%)

conicRGBVariableFourCorners

PowerShell



            $alpha = "$(100 / 4)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 0% 0%, color-mix(in srgb, var(--red) 25%, transparent) 0% 8%, color-mix(in srgb, var(--green) 25%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 25%, transparent) 16.67% 25%),
repeating-conic-gradient(from 90deg at 100% 0%, color-mix(in srgb, var(--red) 25%, transparent) 0% 8%, color-mix(in srgb, var(--green) 25%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 25%, transparent) 16.67% 25%),
repeating-conic-gradient(from 180deg at 0% 100%, color-mix(in srgb, var(--red) 25%, transparent) 0% 8%, color-mix(in srgb, var(--green) 25%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 25%, transparent) 16.67% 25%),
repeating-conic-gradient(from 270deg at 100% 100%, color-mix(in srgb, var(--red) 25%, transparent) 0% 8%, color-mix(in srgb, var(--green) 25%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 25%, transparent) 16.67% 25%)

conicRGBVariableOverlapHorizontal

PowerShell



            $alpha = "$(100 / 2)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '50%') {
                foreach ($horizontal in '25%', '75%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 180
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 25% 50%, color-mix(in srgb, var(--red) 50%, transparent) 0% 8%, color-mix(in srgb, var(--green) 50%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 50%, transparent) 16.67% 25%),
repeating-conic-gradient(from 180deg at 75% 50%, color-mix(in srgb, var(--red) 50%, transparent) 0% 8%, color-mix(in srgb, var(--green) 50%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 50%, transparent) 16.67% 25%)

conicRGBVariableOverlapVertical

PowerShell



            $alpha = "$(100 / 2)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '25%', '75%') {
                foreach ($horizontal in '50%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 180
                }
            }) -join (',' + [Environment]::NewLine)

CSS


background-image:repeating-conic-gradient(from 0deg at 50% 25%, color-mix(in srgb, var(--red) 50%, transparent) 0% 8%, color-mix(in srgb, var(--green) 50%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 50%, transparent) 16.67% 25%),
repeating-conic-gradient(from 180deg at 50% 75%, color-mix(in srgb, var(--red) 50%, transparent) 0% 8%, color-mix(in srgb, var(--green) 50%, transparent) 8.33% 17%, color-mix(in srgb, var(--blue) 50%, transparent) 16.67% 25%)

conicVariable

PowerShell


 gradient conic 'var(--blue)' 'var(--brightBlue)'

CSS


background-image:conic-gradient(var(--blue), var(--brightBlue))

conicVariableRainbow

PowerShell


 
        gradient conic @(
            'var(--red)'
            'var(--brightYellow)'
            'var(--yellow)'
            'var(--green)'
            'var(--blue)'
            'var(--brightPurple)'
            'var(--purple)'
        )

CSS


background-image:conic-gradient(var(--red), var(--brightYellow), var(--yellow), var(--green), var(--blue), var(--brightPurple), var(--purple))

Hue Rotate

View Source


<#
.SYNOPSIS
    CSS Gradients
.DESCRIPTION
    Generating CSS Gradients
.NOTES
    CSS Gradients are pretty great.

    I recently wrote [Gradient](https://github.com/PowerShellWeb/Gradient), a mini-module to help generate gradients.

    This page generates a number of cool CSS gradients we can drop into any website.

    Like most of the rest of this site, this page is experimental and subject to change.

    This work will be feeding into a framework, once I Have the excess time.
.LINK
    https://MrPowerShell.com/CSS/Gradients
#>
#requires -Module MarkX, Gradient
param(
[Collections.IDictionary]
$SampleGradients = [Ordered]@{
    radial = { gradient '#4488ff' '#224488' }
    radialRainbow = { gradient red orange yellow green blue indigo violet }
    radialVariableRainbow = { gradient @(
        'var(--red)'
        'var(--brightYellow)'
        'var(--yellow)'
        'var(--green)'
        'var(--blue)'
        'var(--brightPurple)'
        'var(--purple)'
    ) }
    linear = { gradient linear '#4488ff' '#224488' }
    linearVariable = { gradient linear 'var(--blue)' 'var(--brightBlue)' }
    linearVariableRainbow = { gradient linear @(
        'var(--red)'
        'var(--brightYellow)'
        'var(--yellow)'
        'var(--green)'
        'var(--blue)'
        'var(--brightPurple)'
        'var(--purple)'
    ) }
    conic =  { gradient conic '#4488ff' '#224488' }
    conicVariable = { gradient conic 'var(--blue)' 'var(--brightBlue)'}
    conicVariableRainbow = { 
        gradient conic @(
            'var(--red)'
            'var(--brightYellow)'
            'var(--yellow)'
            'var(--green)'
            'var(--blue)'
            'var(--brightPurple)'
            'var(--purple)'
        )
    }
    diagonalLinearRepeating = { 
        @(
            'repeating-linear'
            '45deg'
            '#4488ff 1rem'
            '#224488 2rem'
        ) | gradient 
        
    }
    radialRepeating = { gradient repeating-radial '#4488ff 1rem',
        '#224488 2rem'
    }
    radialRepeatingVariable = { gradient repeating-radial 'var(--blue) 1rem',         
        'var(--brightBlue) 2rem'
    }
    radialRepeatingRGBVariable = { gradient repeating-radial 'var(--red) 1rem',
        'var(--green) 2rem',
        'var(--blue) 3rem'    
    }
    radialRepeatingRGBVariableOverlap = @(
        { 
            gradient repeating-radial  @(
                'circle closest-side at 0.01% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 3rem'    
            )
        }
        { 
            gradient repeating-radial  @(
                'circle closest-side at 99.99% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 3rem'    
            )
        }
    )
    radialRepeatingRainbowVariableOverlap = @(
        { 
            gradient repeating-radial  @(
                'circle closest-side at 25% 50%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )
        }
        { 
            gradient repeating-radial  @(
                'circle closest-side at 75% 50%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )
        }
    )
    radialRepeatingRainbowVariableCorners = @(
        { 
            gradient repeating-radial  @(
                'circle closest-side at 0.01% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )
        }
        { 
            gradient repeating-radial  @(
                'circle closest-side at 99.99% 0.01%'
                'color-mix(in srgb, var(--red) 50%, transparent) 1rem'
                'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2rem'
                'color-mix(in srgb, var(--yellow) 50%, transparent) 3rem'
                'color-mix(in srgb, var(--green) 50%, transparent) 4rem'
                'color-mix(in srgb, var(--blue) 50%, transparent) 5rem'
                'color-mix(in srgb, var(--brightPurple) 50%, transparent) 6rem'
                'color-mix(in srgb, var(--purple) 50%, transparent) 7rem'
            )
        }
    )
    radialEllipseRepeatingRainbowOverlap = @(
        {   
            $alpha = "$(100 / 2)%"
            @(foreach ($vertical in '50%') {
                foreach ($horizontal in '25%', '75%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialCircleRepeatingForegroundBackgroundPentagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "circle closest-side at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialCircleRepeatingForegroundBackgroundHexagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "circle closest-side at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingForegroundBackgroundHexagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialCircleRepeatingFullHexagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "circle closest-side at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRGBHexagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    
    radialEllipseRepeatingFullHexagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '33% 0.01%','66% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 60            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingForegroundBackgroundPentagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRGBPentagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )    
    radialEllipseRepeatingFullPentagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '50% 0.01%','99.99% 50%','66% 99.99%', '33% 99.99%', '0.01% 50%') {                
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRainbowCorners = @(
        {   
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRainbowOverlapFourCorners = @(
        {   
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%','99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRainbowOverlap8 = @(
        {   
            $alpha = "$(100 / 8)%"
            @(foreach ($vertical in '25%','50%','75%') {
                foreach ($horizontal in '25%', '50%','75%') {
                    if ($horizontal -eq '50%' -and $vertical -eq '50%') {
                        continue
                    }
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $Horizontal $vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRainbowVariableFourCorners = @(
        {   
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%', '99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "ellipse 50% 50% at $vertical $Horizontal"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialRepeatingRainbowVariableFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%', '99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "circle closest-side at $horizontal $Vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine) 
        }
    )
    
    conicRepeating = { gradient repeating-conic '#4488ff 0% 5%',
        '#224488 5% 10%'
    }
    conicRepeatingVariable = { gradient repeating-conic 'var(--blue) 0% 5%',
        'var(--brightBlue) 5% 10%'
    }
    conicRepeatingColorMix = { 
        gradient repeating-conic 'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'
    }
    conicRepeatingRGB = {
        gradient repeating-conic @(
            'red 0% 5%',
            'green 5% 10%'   
            'blue 10% 15%'
        )
    }
    conicRepeatingOverlap = @(
        { gradient repeating-conic 'from 0deg at 25% 50%',
                '#4488ff99 0% 5%',
                '#22448899 5% 10%'
        }, { gradient repeating-conic 'from 180deg at 75% 50%',
            '#4488ff99 0% 5%',
            '#22448899 5% 10%'
        }
    )
    conicRepeatingRGBOverlap = @(
        { gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 5%',
            'color-mix(in srgb, green 50%, transparent) 5% 10%',
            'color-mix(in srgb, blue 50%, transparent) 10% 15%'
        }, { gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 5%',
            'color-mix(in srgb, green 50%, transparent) 5% 10%',
            'color-mix(in srgb, blue 50%, transparent) 10% 15%'
        }
    )
    conicRepeatingRGBVariableOverlap = @(
        { gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--green) 50%, transparent) 5% 10%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 10% 15%'
        }, { gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--green) 50%, transparent) 5% 10%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 10% 15%'
        }
    )
    conicRepeatingRainbowOverlap = @(
        { gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 2%',
            'color-mix(in srgb, orange 50%, transparent) 2% 4%',
            'color-mix(in srgb, yellow 50%, transparent) 4% 6%',
            'color-mix(in srgb, green 50%, transparent) 6% 8%',
            'color-mix(in srgb, blue 50%, transparent) 8% 10%',
            'color-mix(in srgb, indigo 50%, transparent) 10% 12%',
            'color-mix(in srgb, violet 50%, transparent) 12% 14%'
        }, { gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, red 50%, transparent) 0% 2%',
            'color-mix(in srgb, orange 50%, transparent) 2% 4%',
            'color-mix(in srgb, yellow 50%, transparent) 4% 6%',
            'color-mix(in srgb, green 50%, transparent) 6% 8%',
            'color-mix(in srgb, blue 50%, transparent) 8% 10%',
            'color-mix(in srgb, indigo 50%, transparent) 10% 12%',
            'color-mix(in srgb, violet 50%, transparent) 12% 14%'
        }
    )
    conicRepeatingRainbowVariableOverlap = @(
        { gradient repeating-conic 'from 0deg at 25% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'
        }, { gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'
        }
    )
        
    conicRepeatingFromCorners = @(
        { gradient repeating-conic 'from 0deg at 0% 0%',
                '#4488ff99 0% 2.5%',
                '#22448899 2.5% 5%'
        }, { gradient repeating-conic 'from 180deg at 100% 0%',
            '#4488ff99 0% 2.5%',
            '#22448899 2.5% 5%'
        }
    )
    
    conicRepeatingVariableOverlap = @(
        { gradient repeating-conic 'from 0deg at 25% 50%',
                'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
                'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'
        }, 
        { gradient repeating-conic 'from 180deg at 75% 50%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'
        }
    )
    
    conicRepeatingVariableCorners = @(
        { gradient repeating-conic 'from 0deg at 0% 0%',
                'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
                'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'
        }, 
        { gradient repeating-conic 'from 180deg at 100% 0%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 0% 5%',
            'color-mix(in srgb, var(--brightBlue) 50%, transparent) 5% 10%'
        }        
    )
    
    conicRepeatingRainbowVariableCorners = @(
        { gradient repeating-conic 'from 0deg at 0% 0%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'
        }, { gradient repeating-conic 'from 180deg at 100% 0%',
            'color-mix(in srgb, var(--red) 50%, transparent) 0% 2%',
            'color-mix(in srgb, var(--brightYellow) 50%, transparent) 2% 4%',
            'color-mix(in srgb, var(--yellow) 50%, transparent) 4% 6%',
            'color-mix(in srgb, var(--green) 50%, transparent) 6% 8%',
            'color-mix(in srgb, var(--blue) 50%, transparent) 8% 10%',
            'color-mix(in srgb, var(--brightPurple) 50%, transparent) 10% 12%',
            'color-mix(in srgb, var(--purple), transparent) 12% 14%'
        }
    )
    
    conicRepeatingVariableFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            $colors = 'blue','brightBlue'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    
    conicRGBVariableCorners = @(
        {
            $alpha = "$(100 / 2)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '0%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 180
                }
            }) -join (',' + [Environment]::NewLine)
        }                
    )
    
    conicRGBVariableOverlapHorizontal = @(
        {
            $alpha = "$(100 / 2)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '50%') {
                foreach ($horizontal in '25%', '75%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 180
                }
            }) -join (',' + [Environment]::NewLine)
        }                
    )
    
    conicRGBVariableOverlapVertical = @(
        {
            $alpha = "$(100 / 2)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '25%', '75%') {
                foreach ($horizontal in '50%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 180
                }
            }) -join (',' + [Environment]::NewLine)
        }                
    )
    
    conicRGBVariableFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)
        }
    )

    radialRainbowVariableFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            @(foreach ($vertical in '0.01%','99.99%') {
                foreach ($horizontal in '0.01%', '99.99%') {
                    gradient repeating-radial  @(
                        "circle closest-side at $horizontal $Vertical"
                        $colorNumber = 0
                        foreach ($color in 'red','brightYellow','yellow',
                            'green','blue','brightPurple', 'purple') {
                            $colorNumber++
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                        }
                    )
                }
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    conicRainbowVariableFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            $colors = 'red','brightYellow','yellow',
                'green','blue','brightPurple', 'purple'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$($colorNumber * 42/$colors.Count/2)%"                            
                            $to =  "$(++$colorNumber * 42/$colors.Count/2)%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                            # "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)
        }
        
    )
    radialEllipseRepeatingForegroundBackgroundTriangle = @(
        {
            $alpha = "$([Math]::Round(100 / 3))%"
            $colors = 'foreground','background'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 120           
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingFullTriangle = @(
        {
            $alpha = "$([Math]::Round(100 / 3))%"
            # $colors = 'foreground','background'
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 120            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    radialEllipseRepeatingRGBTriangle = @(
        {
            $alpha = "$([Math]::Round(100 / 3))%"
            $colors = 'red','green','blue'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {
                gradient repeating-radial  @(
                    "ellipse 50% 50% at $position"
                    $colorNumber = 0
                    foreach ($color in $colors) {
                        $colorNumber++
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $($colorNumber)rem"
                    }                    
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    conicRainbowVariableFullTriangle = @(
        {
            $alpha = "$([Math]::Round(100 / 3))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '0.01% 99.99%','50% 0.01%', '99.99% 99.99%') {    
                gradient repeating-conic  @(
                    "from ${degrees}deg at $position"
                    $colorNumber = 0                        
                    foreach ($color in $colors) {                            
                        $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                        $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                    }
                )
                $degrees += 120
            
            }) -join (',' + [Environment]::NewLine)
        }
        
    )
    conicRainbowVariableFullHexagon = @(
        {
            $alpha = "$([Math]::Round(100 / 6))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '33% 0%','66% 0%', '100% 50%','66% 100%', '33% 100%', '0% 50%') {                
                gradient repeating-conic  @(
                    "from ${degrees}deg at $position"
                    $colorNumber = 0                        
                    foreach ($color in $colors) {                            
                        $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                        $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                    }
                )
                $degrees += 60
            
            }) -join (',' + [Environment]::NewLine)
        }
        
    )
    conicRainbowVariableFullPentagon = @(
        {
            $alpha = "$([Math]::Round(100 / 5))%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($position in '50% 0%','100% 50%','66% 100%', '33% 100%', '0% 50%') {                
                gradient repeating-conic  @(
                    "from ${degrees}deg at $position"
                    $colorNumber = 0                        
                    foreach ($color in $colors) {                            
                        $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                        $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                        "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                    }
                )
                $degrees += 72            
            }) -join (',' + [Environment]::NewLine)
        }        
    )
    conicRainbowVariableFullFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($vertical in '0%','100%') {
                foreach ($horizontal in '0%', '100%') {                    
                    gradient repeating-conic  @(
                        "from ${degrees}deg at $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                            
                            $from = "$([Math]::Round($colorNumber * 50/$colors.Count/2, 2))%"
                            $to =  "$([Math]::Round(++$colorNumber * 50/$colors.Count/2))%"
                            "color-mix(in srgb, var(--$color) $alpha, transparent) $from $to"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)
        }
        
    )
    linearHorizontalRainbowVariableFullFourCorners = @(
        {
            $alpha = "$(100 / 2)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            @(
                foreach ($horizontal in 'left', 'right') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $horizontal"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )                
                }
            ) -join (',' + [Environment]::NewLine)
        }
        
    )
    linearVerticalRainbowVariableFullFourCorners = @(
        {
            $alpha = "$(100 / 2)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            @(
                foreach ($vertical in 'top', 'bottom') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )                
                }
            ) -join (',' + [Environment]::NewLine)
        }
        
    )
    linearThatchRainbowVariableFull = @(
        {
            $alpha = "$(100 / 4)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            @(
                foreach ($direction in 'right','bottom','left','top') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $direction"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )                
                }
            ) -join (',' + [Environment]::NewLine + (' ' * 2))
        }
        
    )
    linearRainbowVariableFullFourCorners = @(
        {
            $alpha = "$(100 / 4)%"
            $colors = 'foreground',
                'black', 'brightBlack',
                'red', 'brightRed',
                'green', 'brightGreen', 
                'yellow','brightYellow',
                'blue','brightBlue',
                'purple', 'brightPurple',
                'cyan', 'brightCyan',
                'white','brightWhite',
                'background'
            $degrees = 0
            @(foreach ($vertical in 'bottom','top') {
                foreach ($horizontal in 'left', 'right') {
                    gradient repeating-linear  @(
                        # "${degrees}deg"
                        "to $horizontal $Vertical"
                        $colorNumber = 0                        
                        foreach ($color in $colors) {                                
                            $colorNumber++                        
                            "color-mix(in srgb, var(--$color) $alpha, transparent) ${colorNumber}rem"
                        }
                    )
                    $degrees += 90
                }
            }) -join (',' + [Environment]::NewLine)
        }
        
    )
}
)

#region Article
$myHelp = Get-Help $MyInvocation.MyCommand.ScriptBlock.File
$title = $myHelp.Synopsis
$description = $myHelp.description.text -join [Environment]::NewLine

if ($page -isnot [Collections.IDictionary]) {
    $page = [Ordered]@{}
}

$page.title = $title
$page.description = $description

$markdown = $myHelp.alertset.alert.text -join [Environment]::NewLine 

$markdown > ($MyInvocation.MyCommand.Name -replace '(?:\.html)?\.ps1$', '.md')
"<style>"
"article { width: 120ch; margin-left:auto;margin-right:auto; }"
"article img { display: block; width: 50%; margin-left: auto; margin-right:auto; }"
"</style>"
"<article>"
$markdown | 
    ConvertFrom-Markdown | 
    Select-Object -expand html
"</article>"
#endregion Article

$gradientTypes = 'radial', 'linear','conic'

$blends = 'normal','darken','multiply','color-burn',
    'linear-dodge','screen','overlay','soft-light','hard-light',
    'difference','exclusion','hue', 'saturation', 'color', 'luminosity'

"<style>

@keyframes huerotate {
    0%, 100% { filter: hue-rotate(0deg)  }
    50% { filter: hue-rotate(360deg)  }
}

.huerotate {
    animation-name: huerotate;
    animation-iteration-count: infinite;    
    animation-duration: 5s;
}

.gradient-sample {     

    width:100%; height:100%;
    background-blend-mode: difference;    
}

.paused {
    animation-play-state: paused;
}
</style>"
foreach ($gradientType in $gradientTypes) {
    "<details open>"
    "<summary>$gradientType</summary>"
    foreach ($sampleId in @($SampleGradients.Keys -match $gradientType | Sort-Object)) {
        if ($SampleGradients[$sampleId] -as [ScriptBlock[]]) {
            "<div>"
                "<h3>$sampleId</h3>"
                                        
                "<details open>"
                    "<summary>PowerShell</summary>"
                    foreach ($gradient in $SampleGradients[$sampleId]) {
                        "<pre><code class='language-powershell'>"
                        [Web.HttpUtility]::HtmlEncode($gradient)
                        "</code></pre>"        
                    }
                "</details>"

                "<details open>"
                    "<summary>CSS</summary>"
                    "<pre><code class='language-css'>"
                    $css = "background-image:$(@(foreach ($gradient in $SampleGradients[$sampleId]) {
                        . $gradient
                    }) -join (', ' + [Environment]::NewLine))"
                    [Web.HttpUtility]::HtmlEncode($css)
                    "</code></pre>"
                "</details>"
                
                "<div class='gradient-preview'>"
                "<div id='$sampleId' class='gradient-sample' style='background-image:$(
                    @(foreach ($gradient in $SampleGradients[$sampleId]) {
                        . $gradient
                    }) -join ', '
                )'></div>"
                
            "</div>"
        }
    }
    "</details>"
}



"<style>.lowerSticky {    
    display: fixed;
    position: sticky;
    z-index: 50;
    bottom: 2.5%;
    max-width: 100%;
    text-align: center;
    mix-blend-mode: difference;
}</style>"

"<div class='lowerSticky'>"
if ($site.Includes.SelectPalette) {
    . $site.Includes.SelectPalette
}

if ($site.Includes.GetRandomPalette) {
    . $site.Includes.GetRandomPalette
}
"<script>"
@"
function toggleHueRotate() {
for (const element of [
    ...document.querySelectorAll('.gradient-sample')
]) {
    element.classList.toggle('huerotate')
}
}
"@
"</script>"
"<input id='toggleHueRotate' type='checkbox' onchange='toggleHueRotate()'></input>"
"<label for='toggleHueRotate'>Hue Rotate</label>"

"</div>"

#region View Source
"<details><summary>View Source</summary>"
"<pre><code class='language-powershell'>"
[Web.HttpUtility]::HtmlEncode($MyInvocation.MyCommand.ScriptBlock)
"</code></pre>"
"</details>"
#endregion View Source

if ($site.Includes.CopyCode) {
    . $site.Includes.CopyCode
}