USA.css

The most American CSS stylesheet. Style your webpage with the stars and stripes as CSS backgrounds. Units are set in inches.

Find this project on GitHub.

.usa-stars {}
.usa-stars {
background: linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.7in 0.43in,
linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.3in 0.43in,
linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.3in 0.43in,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.7in 0.43in,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.7in 0.23in,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.3in 0.23in,
linear-gradient(324deg, #3c3b6e 4%, transparent 4%) -0.2in 0.93in,
linear-gradient(36deg, #3c3b6e 4%, transparent 4%) 0.8in 0.93in,
linear-gradient(72deg, #fff 8.5%, transparent 8.5%) 0.8in 0.93in,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -0.2in 0.93in,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -0.2in 0.73in,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 0.8in 0.73in,
#3c3b6e;
background-size: 1in 1in;
}
.usa-stripes-horizontal {}
.usa-stripes-horizontal {
background: repeating-linear-gradient(
#b22234 0,
#b22234 0.2in,
#fff 0.2in,
#fff 0.4in
);
}
.usa-stripes-vertical {}
.usa-stripes-vertical {
background: repeating-linear-gradient(
90deg,
#b22234 0,
#b22234 0.2in,
#fff 0.2in,
#fff 0.4in
);
}
.usa-diamond {}
.usa-diamond {
background: linear-gradient(
45deg,
#b22234 25%,
transparent 0,
transparent 75%,
#3c3b6e 0,
#3c3b6e
),
linear-gradient(
-45deg,
#b22234 25%,
transparent 0,
transparent 75%,
#3c3b6e 0,
#3c3b6e
), #fff;
background-position: 50% 50%;
background-size: 0.5in 0.5in;
}
.usa-radial {}
.usa-radial {
background: radial-gradient(
circle at 50% 0,
#fff 0,
#fff 0.2in,
#3c3b6e 0,
#3c3b6e 0.4in,
#fff 0,
#fff 0.6in,
#b22234 0,
#b22234 0.8in,
#fff 0,
#fff 1.2in
),
#fff;
background-size: 1.4in 100%;
background-position: 50% 0;
background-repeat: repeat-x;
}
.usa-plaid {}
.usa-plaid {
background: repeating-linear-gradient(
45deg,
#b22234 0,
#b22234 0.2in,
#fff 0,
#fff 0.25in,
transparent 0,
transparent 0.5in,
#fff 0,
#fff 0.55in
),
repeating-linear-gradient(
-45deg,
#3c3b6e,
#3c3b6e 0.25in,
transparent 0,
transparent 0.4in
),
#fff;
}
.usa-conic { }
.usa-conic {
/* Conic CSS gradients are not supported in Firefox or IE (Caniuse) */
background: repeating-conic-gradient(
#b22234 0,
#b22234 10deg,
#fff 0,
#fff 20deg,
#3c3b6e 0,
#3c3b6e 30deg,
#fff 0,
#fff 40deg
);
}