CSS and HTML guide and codes for JanitorAI has moved!

This guide has been moved to Carrd! Here's a direct link to it: cssforjai.ju.mp. Thank you all for reading my guide :> the only thing left in this page is the gradient patterns, however it will be removed soon as well.

Gathered by

Gradient Patterns

This section is for specific gradient code so you can form patterns. All of these codes were made for bot cards, but you may try to use these for other elements.

No example images for this section yet so please feel free to mess around with these.

Credits to pickledfishfingers
Replace COLOR to a color (word), hexcode, or rgb

Multi-Colored Radial Gradient w/ 3 Colors

⎗

1	background: radial-gradient(circle, COLOR, COLOR, COLOR);

Multi-Colored Conic Gradient

⎗

1	background: conic-gradient(from 0deg, COLOR, COLOR, COLOR, COLOR);

Multi-Colored Radial Gradient w/ 4 Colors

⎗

1	background: radial-gradient(circle at center, COLOR, COLOR 25%, COLOR 50%, COLOR 75%);

Repeating Linear Gradient

⎗

background: repeating-linear-gradient(
    45deg, /* angle */
    COLOR, /* start color */
    COLOR 10px, /* end of first stripe */
    COLOR 10px, /* start of second stripe */
    COLOR 20px /* end of second stripe */
);

Repeating Radial Gradient

⎗

background: repeating-radial-gradient(
    circle,
    COLOR,
    COLOR 10px,
    COLOR 10px,
    COLOR 20px
);

Example for this is in pickledfishfinger's profile.

Multiple Backgrounds 1

Linear gradient from left to right. The background-blend-mode property can be used to blend these layers.

⎗

background: 
    linear-gradient(45deg, COLOR, COLOR),
    linear-gradient(to right, COLOR, COLOR);
background-blend-mode: multiply;

Multiple Backgrounds 2

Semi-transparent overlay

⎗

1
2
3

background: 
        linear-gradient(45deg, COLOR, COLOR),
        linear-gradient(to right, COLOR, COLOR);

Image and Gradient Overlay:

⎗

background: 
    linear-gradient(rgba(41, 16, 67, 0.5), rgba(41, 16, 67, 0.5)),
    url('path/to/your/image.jpg');
background-blend-mode: overlay;

Polka Dot Patterns

⎗

background-color: COLOR;
background-image: radial-gradient(COLOR 15%, transparent 16%),
                  radial-gradient(COLOR 15%, transparent 16%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

Simple Stripes

⎗

background: repeating-linear-gradient(
    90deg,
    COLOR,
    COLOR 10px,
    COLOR 10px,
    COLOR 20px
);

Hexagonal Pattern Gradient

⎗

background-color: COLOR;
background-image: linear-gradient(30deg, COLOR 12%, transparent 12.5%, transparent 87%, COLOR 87.5%, COLOR),
                  linear-gradient(90deg, COLOR 12%, transparent 12.5%, transparent 87%, COLOR 87.5%, COLOR),
                  linear-gradient(30deg, transparent 37.5%, COLOR 37.5%, COLOR 62.5%, transparent 62.5%);
background-size: 50px 87px;
background-position: 0 0, 25px 43.5px, 0 0;

A Mesh of Several Radial Gradients

⎗

background: radial-gradient(circle at top left, COLOR, transparent),
            radial-gradient(circle at top right, COLOR, transparent),
            radial-gradient(circle at bottom left, COLOR, transparent),
            radial-gradient(circle at bottom right, COLOR, transparent);