Download
CSS variable config
I used 2 main colors on Vietnam's flag. They are yellow and red. I also use a variable transparent to make more space for patterns. Below is the variable table
| Variable | Value |
|---|---|
| --red | red |
| --yellow | yellow |
| --transparent | #0000 |
Demo
.vn-1 {
background: linear-gradient(
135deg,
var(--transparent) 0 3.8rem,
var(--red) 3.8rem 4.68rem,
var(--yellow) 4.68rem 8.04rem,
var(--red) 8.04rem 8.92rem,
var(--transparent) 8.92rem
),
linear-gradient(
-135deg,
var(--yellow) 0 3.77rem,
var(--red) 3.77rem 4.21rem,
var(--yellow) 4.2rem 8rem,
var(--red) 8rem 8.46rem,
var(--transparent) 8.46rem 14.4rem,
var(--red) 14.4rem 14.82rem,
var(--yellow) 14.82rem
),
linear-gradient(
135deg,
var(--yellow) 0 12.28rem,
var(--red) 12.28rem 13.16rem,
var(--yellow) 13.16rem
);
background-size: 21rem 6rem;
}.vn-2 {
background: conic-gradient(
at 0 2rem,
var(--red) 45deg,
var(--transparent) 45deg
),
conic-gradient(
from 135deg at 0 6rem,
var(--red) 45deg,
var(--transparent) 45deg
),
conic-gradient(
from 315deg at 100% 2rem,
var(--red) 45deg,
var(--transparent) 45deg
),
conic-gradient(
from 45deg at 6rem 100%,
var(--red) 45deg,
var(--transparent) 45deg
),
linear-gradient(
var(--yellow) 0 0.25rem,
var(--transparent) 0.25rem 3.75rem,
var(--yellow) 3.75rem 4.25rem,
var(--transparent) 4.25rem 7.75rem,
var(--yellow) 7.75rem
),
linear-gradient(
0.25turn,
var(--yellow) 0 0.25rem,
var(--transparent) 0.25rem 3.75rem,
var(--yellow) 3.75rem 4.25rem,
var(--transparent) 4.25rem 7.75rem,
var(--yellow) 7.75rem
),
linear-gradient(
45deg,
var(--yellow) 0 2rem,
var(--transparent) 2rem 9.3rem,
var(--yellow) 9.3rem
),
linear-gradient(
-45deg,
var(--yellow) 0 2rem,
var(--transparent) 2rem 9.3rem,
var(--yellow) 9.3rem
),
linear-gradient(
var(--red) 0 2.1rem,
var(--transparent) 2.1rem 5.9rem,
var(--red) 5.9rem
),
linear-gradient(
0.25turn,
var(--red) 0 2.1rem,
var(--transparent) 2.1rem 5.9rem,
var(--red) 5.9rem
),
conic-gradient(
from 135deg at 50% 2.1rem,
var(--transparent) 90deg,
var(--red) 90deg 180deg
),
conic-gradient(
from 315deg at 50% 5.9rem,
var(--transparent) 90deg,
var(--red) 90deg 180deg
),
var(--yellow);
background-size: 8rem 8rem;
}.vn-3 {
background: radial-gradient(
var(--transparent) 0 3.5rem,
var(--yellow) 3.5rem 4rem,
var(--transparent) 4rem
),
radial-gradient(
at 0 0,
var(--transparent) 0 3.5rem,
var(--yellow) 3.5rem 4rem,
var(--transparent) 4rem
),
radial-gradient(
at 0 100%,
var(--transparent) 0 3.5rem,
var(--yellow) 3.5rem 4rem,
var(--transparent) 4rem
),
radial-gradient(
at 100% 0,
var(--transparent) 0 3.5rem,
var(--yellow) 3.5rem 4rem,
var(--transparent) 4rem
),
radial-gradient(
at 100% 100%,
var(--transparent) 0 3.5rem,
var(--yellow) 3.5rem 4rem,
var(--transparent) 4rem
),
var(--red);
background-size: 8rem 8rem;
}.vn-4 {
background: radial-gradient(var(--yellow) 0 1.5rem, var(--transparent) 1rem),
radial-gradient(at 0% 0%, var(--yellow) 0 1.5rem, var(--transparent) 1rem),
radial-gradient(at 0% 100%, var(--yellow) 0 1.5rem, var(--transparent) 1rem),
radial-gradient(at 100% 0%, var(--yellow) 0 1.5rem, var(--transparent) 1rem),
radial-gradient(
at 100% 100%,
var(--yellow) 0 1.5rem,
var(--transparent) 1rem
),
linear-gradient(
0deg,
var(--transparent) 0 2.5rem,
var(--yellow) 2.5rem 3rem,
var(--transparent) 3rem 7rem,
var(--yellow) 7rem 7.5rem,
var(--transparent) 7.5rem 10rem
),
linear-gradient(
90deg,
var(--transparent) 0 2.5rem,
var(--yellow) 2.5rem 3rem,
var(--transparent) 3rem 7rem,
var(--yellow) 7rem 7.5rem,
var(--transparent) 7.5rem 10rem
),
var(--red);
background-size: 10rem 10rem;
}.vn-5 {
background: linear-gradient(
0.25turn,
var(--transparent) 0 2.85rem,
var(--yellow) 2.85rem 3.15rem,
var(--transparent) 3.15rem
),
conic-gradient(
at 50% 0,
var(--red) 105deg,
var(--transparent) 95deg 255deg,
var(--red) 255deg
),
conic-gradient(
at 50% 5.1rem,
var(--transparent) 75deg,
var(--red) 75deg 285deg,
var(--transparent) 285deg
),
linear-gradient(
-15deg,
var(--transparent) 0 3.5rem,
var(--red) 3.5rem 3.8rem,
var(--transparent) 3.8rem 8.3rem,
var(--red) 8.3rem 8.6rem,
var(--transparent) 8.6rem
),
linear-gradient(
15deg,
var(--transparent) 0 3.5rem,
var(--red) 3.5rem 3.8rem,
var(--transparent) 3.8rem 8.3rem,
var(--red) 8.3rem 8.6rem,
var(--transparent) 8.6rem
),
linear-gradient(
0.25turn,
var(--red) 0 0.15rem,
var(--transparent) 0.15rem 5.85rem,
var(--red) 5.85rem
),
var(--yellow);
background-size: 6rem 8rem;
}.vn-6 {
background: conic-gradient(
at 50% 7rem,
var(--transparent) 40deg,
var(--red) 40deg 45deg,
var(--yellow) 45deg 130deg,
var(--red) 130deg 230deg,
var(--yellow) 205deg 315deg,
var(--red) 315deg 320deg,
var(--transparent) 320deg
),
radial-gradient(
circle at 50% 7rem,
var(--transparent) 2rem,
var(--red) 2rem 2.2rem,
var(--yellow) 2.2rem 6rem,
var(--red) 6rem 6.2rem,
var(--yellow) 6.2rem
),
linear-gradient(
0.25turn,
var(--transparent) 0 3.9rem,
var(--red) 3.95rem 4.05rem,
var(--transparent) 4.1rem
),
linear-gradient(
60deg,
var(--transparent) 0 3.9rem,
var(--red) 3.95rem 4.05rem,
var(--transparent) 4.1rem
),
linear-gradient(
-60deg,
var(--transparent) 0 3.9rem,
var(--red) 3.95rem 4.05rem,
var(--transparent) 4.1rem
);
background-size: 8rem 8rem;
}.vn-7 {
background: conic-gradient(
from 180deg at 3.5rem 5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 90deg at 4.5rem 5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
linear-gradient(
0.25turn,
var(--red) 0 0.5rem,
var(--transparent) 0.5rem 7.5rem,
var(--red) 7.5rem
),
linear-gradient(
var(--red) 0 1rem,
var(--yellow) 1rem 4rem,
var(--red) 4rem 5rem,
var(--transparent) 5rem
),
linear-gradient(
0.25turn,
var(--transparent) 0 3.5rem,
var(--red) 3.5rem 4.5rem,
var(--transparent) 4.5rem
);
background-size: 8rem 8rem;
}.vn-8 {
background: linear-gradient(
var(--yellow) 0 0.25rem,
var(--transparent) 0.25rem 7.75rem,
var(--yellow) 7.75rem
),
linear-gradient(
0.25turn,
var(--yellow) 0 0.25rem,
var(--transparent) 0.25rem 7.75rem,
var(--yellow) 7.75rem
),
conic-gradient(at 5.5rem 2rem, var(--red) 90deg, var(--transparent) 90deg),
conic-gradient(
from 90deg at 6rem 5.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 180deg at 2.5rem 6rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 270deg at 2rem 2.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
linear-gradient(
var(--transparent) 0 2rem,
var(--yellow) 2rem 2.5rem,
var(--transparent) 2.5rem 5.5rem,
var(--yellow) 5.5rem 6rem,
var(--transparent) 6rem
),
linear-gradient(
0.25turn,
var(--transparent) 0 2rem,
var(--yellow) 2rem 2.5rem,
var(--transparent) 2.5rem 5.5rem,
var(--yellow) 5.5rem 6rem,
var(--transparent) 6rem
),
var(--red);
background-size: 8rem 8rem;
}.vn-9 {
background: conic-gradient(
at 50% 0.25rem,
var(--red) 120deg,
var(--transparent) 120deg 240deg,
var(--red) 240deg
),
linear-gradient(var(--transparent) 8.5rem, var(--red) 8.5rem),
linear-gradient(
0.25turn,
var(--red) 0.25rem,
var(--transparent) 0.25rem 1.75rem,
var(--yellow) 1.75rem 2.25rem,
var(--transparent) 2.25rem 3.75rem,
var(--red) 3.75rem
),
conic-gradient(
at 50% 1.5rem,
var(--yellow) 30deg,
var(--transparent) 30deg 330deg,
var(--yellow) 330deg
),
conic-gradient(
at 50% 3rem,
var(--red) 30deg,
var(--transparent) 30deg 330deg,
var(--red) 330deg
),
conic-gradient(
at 50% 4rem,
var(--yellow) 30deg,
var(--transparent) 30deg 330deg,
var(--yellow) 330deg
),
conic-gradient(
at 50% 5rem,
var(--red) 30deg,
var(--transparent) 30deg 330deg,
var(--red) 330deg
),
conic-gradient(
at 50% 6rem,
var(--yellow) 30deg,
var(--transparent) 30deg 330deg,
var(--yellow) 330deg
),
conic-gradient(
at 50% 7rem,
var(--red) 30deg,
var(--transparent) 30deg 330deg,
var(--red) 330deg
),
conic-gradient(
at 50% 8rem,
var(--yellow) 30deg,
var(--red) 30deg 330deg,
var(--yellow) 330deg
);
background-size: 4rem 9rem;
}.vn-10 {
background: linear-gradient(
var(--transparent) 2rem,
var(--yellow) 2rem 4rem,
var(--transparent) 4rem
),
linear-gradient(
0.25turn,
var(--red) 0 2rem,
var(--transparent) 2rem 6rem,
var(--red) 6rem
),
linear-gradient(var(--yellow) 6rem, var(--red) 6rem);
background-size: 8rem 8rem;
}.vn-11 {
background: linear-gradient(
0.25turn,
var(--red) 0.25rem,
var(--transparent) 0.25rem 1.25rem,
var(--red) 1.25rem 1.75rem,
var(--transparent) 1.75rem 2.75rem,
var(--red) 2.75rem
),
conic-gradient(
at 50% -0.5rem,
var(--red) 135deg,
var(--transparent) 135deg 225deg,
var(--red) 225deg
),
conic-gradient(
at 50% 6.5rem,
var(--transparent) 45deg,
var(--red) 45deg 315deg,
var(--transparent) 315deg
),
conic-gradient(
at 50% 2rem,
var(--yellow) 135deg,
var(--transparent) 135deg 225deg,
var(--yellow) 225deg
),
conic-gradient(
at 50% 4rem,
var(--red) 45deg,
var(--yellow) 45deg 315deg,
var(--red) 315deg
);
background-size: 3rem 6rem;
}.vn-12 {
background: linear-gradient(to top, var(--red) 1rem, var(--transparent) 1rem),
linear-gradient(
0.25turn,
var(--red) 0.5rem,
var(--transparent) 0.5rem 3.5rem,
var(--red) 3.5rem 4.5rem,
var(--transparent) 4.5rem 7.5rem,
var(--red) 7.5rem
),
linear-gradient(
var(--yellow) 1rem,
var(--transparent) 1rem 3rem,
var(--yellow) 3rem 4rem,
var(--red) 4rem 5rem,
var(--yellow) 5rem 6rem,
var(--transparent) 6rem 8rem,
var(--yellow) 8rem 9rem,
var(--transparent) 9rem
),
conic-gradient(
from 270deg at 2.5rem 3rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(at 5.5rem 3rem, var(--red) 90deg, var(--transparent) 90deg),
conic-gradient(
at 5.5rem 3rem,
var(--red) 90deg,
var(--transparent) 90deg 270deg,
var(--yellow) 270deg
),
linear-gradient(
0.25turn,
var(--yellow) 1.5rem,
var(--transparent) 1.5rem 6.5rem,
var(--yellow) 6.5rem
),
var(--red);
background-size: 8rem 10rem;
}.vn-13 {
background: linear-gradient(
45deg,
var(--transparent) 0 3.3rem,
var(--yellow) 3.3rem 3.8rem,
var(--transparent) 3.8rem 10.35rem,
var(--yellow) 10.35rem 10.85em,
var(--transparent) 10.85rem
),
linear-gradient(
-45deg,
var(--transparent) 0 3.3rem,
var(--yellow) 3.3rem 3.8rem,
var(--transparent) 3.8rem 10.35rem,
var(--yellow) 10.35rem 10.85em,
var(--transparent) 10.85rem
),
conic-gradient(
from 135deg at 1rem 6.2rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 135deg at 9rem 6.2rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 135deg at 50% 7rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 225deg at 1.5rem 3.5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 45deg at 8.5rem 3.5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
linear-gradient(
to bottom,
var(--transparent) 3.5rem,
var(--red) 3.5rem 5rem,
var(--transparent) 5rem
),
linear-gradient(
45deg,
var(--transparent) 0 5.5rem,
var(--red) 5.5rem 9.1rem,
var(--transparent) 9.1rem
),
linear-gradient(
-45deg,
var(--transparent) 0 5.74rem,
var(--red) 5.5rem 9.1rem,
var(--transparent) 9.1rem
),
linear-gradient(
45deg,
var(--transparent) 0 9rem,
var(--yellow) 9rem 9.5rem,
var(--transparent) 9.5rem
),
linear-gradient(
-45deg,
var(--transparent) 0 9rem,
var(--yellow) 9rem 9.5rem,
var(--transparent) 9.5rem
),
var(--red);
background-size: 10rem 10rem;
}.vn-14 {
background: linear-gradient(
var(--red) 0.25rem,
var(--transparent) 0.25rem 3.5rem,
var(--red) 3.5rem 4rem,
var(--transparent) 4rem 7.25rem,
var(--red) 7.25rem
),
linear-gradient(
0.25turn,
var(--red) 0.25rem,
var(--transparent) 0.25rem 3.5rem,
var(--red) 3.5rem 4rem,
var(--transparent) 4rem 7.25rem,
var(--red) 7.25rem
),
conic-gradient(
at 2.5rem 2rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 90deg at 5.5rem 2.5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 180deg at 5rem 5.5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 270deg at 2rem 5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
linear-gradient(
var(--transparent) 2rem,
var(--red) 2rem 2.5rem,
var(--transparent) 2.5rem 5rem,
var(--red) 5rem 5.5rem,
var(--transparent) 5.5rem
),
linear-gradient(
0.25turn,
var(--transparent) 2rem,
var(--red) 2rem 2.5rem,
var(--transparent) 2.5rem 5rem,
var(--red) 5rem 5.5rem,
var(--transparent) 5.5rem
),
var(--red);
background-size: 7.5rem 7.5rem;
}.vn-15 {
background: linear-gradient(
var(--red) 0.5rem,
var(--transparent) 0.5rem 9.5rem,
var(--red) 9.5rem
),
linear-gradient(
0.25turn,
var(--red) 0.5rem,
var(--transparent) 0.5rem 4.5rem,
var(--red) 4.5rem 5.5rem,
var(--transparent) 5.5rem 9.5rem,
var(--red) 9.5rem
),
linear-gradient(
var(--yellow) 1.5rem,
var(--transparent) 1.5rem 4.5rem,
var(--yellow) 4.5rem 5.5rem,
var(--transparent) 5.5rem 8.5rem,
var(--yellow) 8.5rem
),
conic-gradient(
at 8.5rem 4.5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 270deg at 1.5rem 4.5rem,
var(--yellow) 90deg,
var(--transparent) 90deg
),
conic-gradient(at 8.5rem 6.5rem, var(--red) 90deg, var(--transparent) 90deg),
conic-gradient(
from 270deg at 1.5rem 6.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(at 7.5rem 4.5rem, var(--red) 90deg, var(--transparent) 90deg),
conic-gradient(
from 270deg at 2.5rem 4.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
linear-gradient(
var(--transparent) 3.5rem,
var(--red) 3.5rem 4.5rem,
var(--transparent) 4.5rem
),
linear-gradient(
0.25turn,
var(--transparent) 3.5rem,
var(--yellow) 3.5rem 4.5rem,
var(--transparent) 4.5rem 5.5rem,
var(--yellow) 5.5rem 6.5rem,
var(--transparent) 6.5rem
),
linear-gradient(
0.25turn,
var(--yellow) 1.5rem,
var(--transparent) 1.5rem 8.5rem,
var(--yellow) 8.5rem
),
linear-gradient(
var(--red) 2.5rem,
var(--yellow) 2.5rem 3.5rem,
var(--transparent) 3.5rem
),
linear-gradient(
0.25turn,
var(--transparent) 2.5rem,
var(--red) 2.5rem 7.5rem,
var(--transparent) 7.5rem
),
linear-gradient(
to top,
var(--red) 2.5rem,
var(--yellow) 2.5rem 3.5rem,
var(--transparent) 3.5rem
),
var(--red);
background-size: 10rem 10rem;
}.vn-16 {
background: linear-gradient(
0.25turn,
var(--transparent) 3.25rem,
var(--yellow) 3.25rem 3.75rem,
var(--transparent) 3.75rem
),
linear-gradient(
0.25turn,
var(--red) 0.5rem,
var(--transparent) 0.5rem 6.5rem,
var(--red) 6.5rem
),
radial-gradient(
circle at 50% 0.87rem,
var(--transparent) 3.5rem,
var(--yellow) 3.5rem 3.75rem,
var(--red) 3.75rem
),
conic-gradient(
from 120deg at 50% 1rem,
var(--yellow) 120deg,
var(--red) 120deg
);
background-size: 7rem 6rem;
}.vn-17 {
background: linear-gradient(
0.25turn,
var(--red) 0.5rem,
var(--transparent) 0.5rem 4.5rem,
var(--red) 4.5rem
),
radial-gradient(
circle at -4rem 50%,
var(--red) 5.5rem,
var(--transparent) 5.5rem
),
radial-gradient(
circle at 9rem 50%,
var(--red) 5.5rem,
var(--transparent) 5.5rem
),
linear-gradient(
var(--yellow) 0.25rem,
var(--red) 0.25rem 0.75rem,
var(--yellow) 0.75rem 7.25rem,
var(--red) 7.25rem 7.75rem,
var(--yellow) 7.75rem
);
background-size: 6rem 8rem;
}.vn-18 {
background: linear-gradient(
0.25turn,
var(--red) 0.5rem,
var(--transparent) 0.5rem 6.5rem,
var(--red) 6.5rem
),
linear-gradient(
var(--transparent) 3.05rem,
var(--yellow) 3.05rem 3.55rem,
var(--transparent) 3.55rem 4.45rem,
var(--yellow) 4.45rem 4.95rem,
var(--transparent) 4.95rem
),
linear-gradient(
0.25turn,
var(--transparent) 3rem,
var(--red) 3rem 4rem,
var(--transparent) 4rem
),
radial-gradient(
circle,
var(--transparent) 3rem,
var(--yellow) 3rem 3.5rem,
var(--red) 3.5rem
),
conic-gradient(at 4.5rem 3.5rem, var(--red) 90deg, var(--transparent) 90deg),
conic-gradient(
from 90deg at 4.5rem 4.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 180deg at 2.5rem 4.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
conic-gradient(
from 270deg at 2.5rem 3.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
linear-gradient(
0.25turn,
var(--transparent) 1.5rem,
var(--yellow) 1.5rem 2rem,
var(--transparent) 2rem 5rem,
var(--yellow) 5rem 5.5rem,
var(--transparent) 5.5rem
),
linear-gradient(
var(--transparent) 3rem,
var(--red) 3rem 5rem,
var(--transparent) 5rem
),
linear-gradient(
var(--transparent) 2.5rem,
var(--red) 2.5rem 3rem,
var(--transparent) 3rem 5rem,
var(--red) 5rem 5.5rem,
var(--transparent) 5.5rem
),
linear-gradient(
0.25turn,
var(--transparent) 2.5rem,
var(--yellow) 2.5rem 3rem,
var(--transparent) 3rem 4rem,
var(--yellow) 4rem 4.5rem,
var(--transparent) 4.5rem
);
background-size: 7rem 8rem;
}.vn-19 {
background: conic-gradient(
from 342deg at 5rem 3.49rem,
var(--red) 108deg,
var(--transparent) 108deg
),
conic-gradient(
from 270deg at 3rem 3.49rem,
var(--red) 108deg,
var(--transparent) 108deg
),
conic-gradient(
from 198deg at 2.4rem 5.2rem,
var(--red) 108deg,
var(--transparent) 108deg
),
conic-gradient(
from 126deg at 4rem 6.2rem,
var(--red) 108deg,
var(--transparent) 108deg
),
conic-gradient(
from 54deg at 5.6rem 5.2rem,
var(--red) 108deg,
var(--transparent) 108deg
),
var(--yellow);
background-size: 8rem 8rem;
}.vn-20 {
background: conic-gradient(
from 315deg at 50% 1.5rem,
var(--red) 90deg,
var(--transparent) 90deg
),
linear-gradient(var(--yellow) 1rem, var(--transparent) 1rem),
conic-gradient(
from 45deg at 50% 3rem,
var(--red) 45deg,
var(--transparent) 45deg
),
conic-gradient(
from 270deg at 50% 3rem,
var(--red) 45deg,
var(--transparent) 45deg
),
conic-gradient(
from 90deg at 70% 3rem,
var(--red) 45deg,
var(--transparent) 45deg
),
conic-gradient(
from 225deg at 30% 3rem,
var(--red) 45deg,
var(--transparent) 45deg
),
linear-gradient(var(--yellow) 4rem, var(--transparent) 4rem),
linear-gradient(
45deg,
var(--transparent) 6.1rem,
var(--yellow) 6.1rem 7.1rem,
var(--transparent) 7.1rem
),
linear-gradient(
-45deg,
var(--transparent) 6.1rem,
var(--yellow) 6.1rem 7.1rem,
var(--transparent) 7.1rem
),
var(--red);
background-size: 10rem 6rem;
}