Painting with Code

Unveiling the Magic Behind CSS Gradient Backgrounds

Share

By Christopher Robison
2024-03-21

Note: Somehow, the descriptions and CSS rules have become jumbled and do not match. I'll fix them when I get some time but I started playing a little game: can you match each description to it's associated CSS?
CDR 03/21/2024

I program recreationally. There. I’ve said it. I like to code. I like to code so much, that I’ll have 3 or 4 projects outside my normal work that I actively engage on, just for fun. Often the results of these side projects can be lackluster, for my-eyes-only, just me testing out some new technologies or techniques. This is not one of those times. I went on a deep-dive into the world of CSS backgrounds; a world much more fascinating than I originally thought it would be. Come join me on my experimental journey to push the boundaries of CSS, exploring the depths of gradient backgrounds. The following 10 CSS rules are standalone, meaning they don’t require anything other than what’s in the rule. You can download the entire set from here. I really went a little crazy and have dozens more but we’ll start with just these 10:

The Geometric Dance - .bg0

.bg0 {
    --s: 50px;
    --c1: #5E412F;
    --c2: #FCEBB6;

    background:
        radial-gradient(25% 50%, var(--c1) 98%, #0000) var(--s) 0/calc(2*var(--s)) var(--s),
        radial-gradient(25% 50%, var(--c2) 98%, #0000) 0 0/calc(2*var(--s)) var(--s),
        repeating-conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%) 0 0/calc(2*var(--s)) calc(2*var(--s));
}

Starting off, I played with radial gradients and a repeating conic gradient to craft .bg0. The result was a mesmerizing geometric pattern that seemed to dance across the screen. The blend of earthy tones created a warm, inviting texture that felt like a digital tapestry.

The Triangular Symphony - .bg1

.bg1 {
    --s: 200px;
    /* control the size */
    --c1: #1d1d1d;
    --c2: #4e4f51;
    --c3: #3c3c3c;

    background:
        repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 180deg) calc(.5*var(--s)) calc(.5*var(--s)*0.577),
        repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 180deg);
    background-size: var(--s) calc(var(--s)*0.577);
}

With .bg1, I ventured into the realm of sharp angles and crisp lines. The repeating conic gradients formed a symphony of triangles, each layer playing its tune. The monochromatic scheme added a sophisticated, modern edge to the design.

The Kaleidoscopic Vision - .bg2

--_g: 0 120deg, #0000 0;
background:
    conic-gradient(from 0deg at calc(500%/6) calc(100%/3), var(--c3) var(--_g)),
    conic-gradient(from -120deg at calc(100%/6) calc(100%/3), var(--c2) var(--_g)),
    conic-gradient(from 120deg at calc(100%/3) calc(500%/6), var(--c1) var(--_g)),
    conic-gradient(from 120deg at calc(200%/3) calc(500%/6), var(--c1) var(--_g)),
    conic-gradient(from -180deg at calc(100%/3) 50%, var(--c2) 60deg, var(--c1) var(--_g)),
    conic-gradient(from 60deg at calc(200%/3) 50%, var(--c1) 60deg, var(--c3) var(--_g)),
    conic-gradient(from -60deg at 50% calc(100%/3), var(--c1) 120deg, var(--c2) 0 240deg, var(--c3) 0);
background-size: calc(var(--s)*1.732) var(--s);

.bg2 was an exploration of symmetry and color. By positioning conic gradients at strategic angles, I created a kaleidoscopic effect that captivated the eye. The subtle color transitions added depth, making the pattern almost leap off the screen.

The Circle Saga - .bg3

In .bg3, circles took center stage. I juxtaposed radial gradients to form a pattern that was both harmonious and intriguing. The contrasting colors added a dynamic rhythm, turning the background into a visual saga.

The Sunset Mirage - .bg4

Drawing inspiration from the sky at dusk, .bg4 became my sunset mirage. The radial and conic gradients mimicked the sun’s glow, fading into the horizon. The play of warm and cool tones created a serene, picturesque backdrop.

The Colorful Carousel - .bg5

With .bg5, I aimed to inject vibrancy and movement. The radial gradients created a carousel of colors, spinning with life. It was a celebration of hues, each turn revealing a new shade, a new emotion.

The Wheel of Fortune - .bg6

.bg6 was a nod to the classic wheel of fortune. The conic gradients formed segments of color, each representing a slice of fate. The design was both playful and mesmerizing, inviting users to take a spin.

The Radiant Burst - .bg7

I sought to capture the explosive beauty of a starburst with .bg7. The conic gradients radiated from specific points, creating a burst of color and light. It was a spectacle of radiance, a burst of energy frozen in time.

The Striped Illusion - .bg8

In .bg8, I experimented with linear gradients to create an optical illusion. The stripes, angled precisely, offered a sense of movement and depth. The alternating colors played tricks on the eye, making the static background seem alive.

The Shadow Play - .bg9

Finally, .bg9 was an exploration of shadows and light. The radial gradients, placed off-center, created an interplay of light and dark. It was a mysterious, enigmatic pattern that invited curiosity and contemplation.

Through these experiments, I discovered the limitless possibilities of CSS gradients. Each background was a step into the unknown, a testament to the power of code to create beauty. As I continue my journey, I’m reminded that in the world of web design, the only limit is our imagination.