Date: Sun, 11 Jun 2023 12:06:28 +0200 Subject: [PATCH 01/57] #101 --- index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/index.html b/index.html index e124a86..c70c31e 100644 --- a/index.html +++ b/index.html @@ -1716,6 +1716,26 @@

CSS Pattern

linear-gradient( 45deg,var(--c)) 0 0/var(--d), linear-gradient(-45deg,var(--c)) 0 0/var(--d) var(--c2); } + + +

From d4b73c3c7ded769c674990c44bb3203954f3f81c Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 18 Jun 2023 11:33:52 +0200 Subject: [PATCH 02/57] #102 --- index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/index.html b/index.html index c70c31e..6d04819 100644 --- a/index.html +++ b/index.html @@ -1736,6 +1736,25 @@

CSS Pattern

var(--c1) 0 210deg,var(--c2) 0 75%,var(--c3) 0); background-size: var(--s) var(--s); } + + +

From cbf7cba20a19df250e6053cdf16ec5d530ab3889 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sat, 24 Jun 2023 12:44:49 +0200 Subject: [PATCH 03/57] #103 --- index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/index.html b/index.html index 6d04819..0a6253d 100644 --- a/index.html +++ b/index.html @@ -1755,6 +1755,23 @@

CSS Pattern

linear-gradient(-150deg,var(--_l)) #55897c /* third color here */; background-size: calc(0.866*var(--s)) var(--s); } + + +

From 91373d6d27d43b1f62f4965545b6a3b34341ea3d Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sat, 24 Jun 2023 13:02:31 +0200 Subject: [PATCH 04/57] a few updates --- index.html | 8 ++++---- style.css | 5 ++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0a6253d..e39e5a6 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,9 @@ - +

@@ -47,7 +49,6 @@

CSS Pattern

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); - /* sqrt(3) = 1.732 */ } @@ -63,13 +64,12 @@

CSS Pattern

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); - /* 0.577 = tan(30deg)*/ }

@@ -1779,6 +1778,7 @@

CSS Pattern

@@ -2280,6 +2280,26 @@

CSS Pattern

linear-gradient(-45deg,var(--l1)) var(--c2); background-size: calc(2*var(--s)) var(--s),var(--s) var(--s); } + +

From a3f586c75f41159274683e6ed75a51d8686d43d8 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 17 Dec 2023 16:20:51 +0100 Subject: [PATCH 37/57] another pattern --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 77af5ca..975ad56 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 132 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 133 CSS-only patterns made with CSS gradients and optimized with CSS variables.

@@ -2300,6 +2300,20 @@

the biggest collection of background Patterns

radial-gradient(var(--r)25% 25%,var(--l)) var(--c2); background-size: var(--s) var(--s) } + + +

From 166000e28b64a00573e8cff11c867e636ec84938 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 31 Dec 2023 13:21:14 +0100 Subject: [PATCH 38/57] another pattern --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 975ad56..a5fd588 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 133 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 134 CSS-only patterns made with CSS gradients and optimized with CSS variables.

@@ -2314,6 +2314,20 @@

the biggest collection of background Patterns

0 0/calc(2*var(--s)) calc(2*var(--s)); background-blend-mode: difference; } + +

From 4b9c24f2ac6dfb101d8e780521f86a97ff2f0090 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Mon, 1 Jan 2024 11:52:02 +0100 Subject: [PATCH 39/57] another pattern --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a5fd588..dc0af06 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 134 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 135 CSS-only patterns made with CSS gradients and optimized with CSS variables.

@@ -2328,6 +2328,20 @@

the biggest collection of background Patterns

var(--g1),var(--g1) var(--s) var(--s) #CFF09E; background-size: calc(2*var(--s)) calc(2*var(--s)); } + +

From 7d0afd60df7da08dc9edeefc2861fd7a1c6f9eb0 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sat, 6 Jan 2024 21:00:35 +0100 Subject: [PATCH 40/57] another pattern --- index.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index dc0af06..0665c08 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 135 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 136 CSS-only patterns made with CSS gradients and optimized with CSS variables.

@@ -2342,6 +2342,23 @@

the biggest collection of background Patterns

var(--g) calc(var(--s)/2) var(--s) #F8ECC9; background-size: var(--s) var(--s),var(--s) calc(2*var(--s)); } + +

From e8fd6c30ca53bbf178342ee7ae13817e4dc3b510 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sat, 6 Jan 2024 23:34:59 +0100 Subject: [PATCH 41/57] x --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 0665c08..c4b4d47 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - +

From 53cb420ede1d8ec48110cd4675e84da497d1a0ca Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 7 Jan 2024 12:54:41 +0100 Subject: [PATCH 42/57] another pattern --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index c4b4d47..c47e048 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 136 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 137 CSS-only patterns made with CSS gradients and optimized with CSS variables.

@@ -2359,6 +2359,20 @@

the biggest collection of background Patterns

var(--c1) 0); background-size: var(--s) var(--s); } + +

From 27dd5ac7bf981abfdca5d31d9988e887807081e9 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 7 Jan 2024 14:05:22 +0100 Subject: [PATCH 43/57] another pattern --- index.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/index.html b/index.html index c47e048..67f6b4c 100644 --- a/index.html +++ b/index.html @@ -2373,6 +2373,21 @@

the biggest collection of background Patterns

linear-gradient( 45deg,var(--g)) var(--p), linear-gradient(-45deg,var(--g)) var(--p) #E5625C; } + +

From 30a4e385bd2a87cae5430ac5cb827818d1654ead Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 7 Jan 2024 14:05:51 +0100 Subject: [PATCH 44/57] x --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 67f6b4c..810ea53 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 137 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 138 CSS-only patterns made with CSS gradients and optimized with CSS variables.

From 6d272ca4baaf058d8b0ae855a5923d17526ebf3e Mon Sep 17 00:00:00 2001 From: Afif13 Date: Tue, 9 Jan 2024 10:10:03 +0100 Subject: [PATCH 45/57] link to animated pattern --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 810ea53..0ae9200 100644 --- a/index.html +++ b/index.html @@ -20,14 +20,14 @@ - +

CSS Pattern

the biggest collection of background Patterns

Explore 138 CSS-only patterns made with CSS gradients and optimized with CSS variables.

Explore 138 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

From 6ce4d9b06d15a4de9cad2123e03f5dd951c273f8 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 14 Jan 2024 12:12:19 +0100 Subject: [PATCH 46/57] another pattern --- index.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 0ae9200..d3c8735 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 138 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

Explore 139 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

@@ -2377,6 +2377,21 @@

the biggest collection of background Patterns

+ +

From 8c2a721049dc48e8be7d285a4e1052f20b965d0c Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 4 Feb 2024 12:40:17 +0100 Subject: [PATCH 48/57] another pattern --- index.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 71042e9..23f496d 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 140 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

Explore 141 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

@@ -2422,6 +2422,21 @@

the biggest collection of background Patterns

var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2); background-size: calc(3*var(--s)) calc(5*var(--s)/2); } + +

From f4ee148b0b39c549e9c28b3100c22f8cb03dff05 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 4 Feb 2024 13:00:39 +0100 Subject: [PATCH 49/57] a small optimization --- index.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 23f496d..b0a2f9b 100644 --- a/index.html +++ b/index.html @@ -2427,14 +2427,11 @@

the biggest collection of background Patterns

From 4366a88ad5de665797585159cd146b030dc11ef3 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Mon, 5 Feb 2024 22:31:51 +0100 Subject: [PATCH 50/57] another pattern --- index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/index.html b/index.html index b0a2f9b..669a29b 100644 --- a/index.html +++ b/index.html @@ -2434,6 +2434,20 @@

the biggest collection of background Patterns

repeating-linear-gradient(45deg,var(--c),#D3643B 0 70%); background-size: var(--s) var(--s); } + +

From 5867086a666f718b60b799a599f76aadee22536c Mon Sep 17 00:00:00 2001 From: Afif13 Date: Mon, 5 Feb 2024 22:34:17 +0100 Subject: [PATCH 51/57] x --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 669a29b..9469baa 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 141 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

Explore 142 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

From 090cace85fe0d80c6b71cff8a58313c2df710ae2 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 11 Feb 2024 10:49:40 +0100 Subject: [PATCH 52/57] another pattern --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9469baa..3be1f53 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 142 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

Explore 143 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

@@ -2448,6 +2448,20 @@

the biggest collection of background Patterns

repeating-linear-gradient(-45deg,var(--g)) var(--c); background-size: var(--s) var(--s); } + +

From 1d5c037e146a52e4cba2e0cbf3f194627c89c0b6 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sun, 11 Feb 2024 20:55:27 +0100 Subject: [PATCH 53/57] another pattern --- index.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3be1f53..4e23e74 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 143 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

@@ -2462,6 +2462,21 @@

the biggest collection of background Patterns

repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%); background-size: calc(10*var(--s)) calc(6*var(--s)); } + +

From 011ab2649036c589c5106e287f54b8a3222d7298 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Thu, 14 Mar 2024 22:29:49 +0100 Subject: [PATCH 54/57] another pattern --- index.html | 48 +++++++++++++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 4e23e74..cefe10c 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

CSS Pattern

the biggest collection of background Patterns

Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

Explore 145 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

@@ -2434,20 +2434,6 @@

the biggest collection of background Patterns

repeating-linear-gradient(45deg,var(--c),#D3643B 0 70%); background-size: var(--s) var(--s); } - -

@@ -2462,6 +2448,20 @@

the biggest collection of background Patterns

repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%); background-size: calc(10*var(--s)) calc(6*var(--s)); } + +

@@ -2477,6 +2477,24 @@

the biggest collection of background Patterns

repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%); background-size: calc(10*var(--s)) calc(6*var(--s)); } + +

From d6cbf517efecfb624cf890158ae8bb1b4f77ad35 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Fri, 15 Mar 2024 23:12:53 +0100 Subject: [PATCH 55/57] improving a pattern --- index.html | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index cefe10c..4d339d1 100644 --- a/index.html +++ b/index.html @@ -2482,18 +2482,17 @@

the biggest collection of background Patterns

From 45498800ed8ca0b4ab6dda4e13d94c9505688332 Mon Sep 17 00:00:00 2001 From: Afif13 Date: Sat, 20 Apr 2024 15:35:39 +0200 Subject: [PATCH 56/57] x --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index 4d339d1..29b2e82 100644 --- a/index.html +++ b/index.html @@ -2265,6 +2265,12 @@

the biggest collection of background Patterns

}

I also have a collection of CSS Generators

+ Go to CSS Generators +

I also have a collection of CSS Generators

+ Go to CSS Generators +

I also have a collection of CSS Generators

- Go to CSS Generators -

Do you want to have some fun?
Solve a CSS Challenge

+ Go to CSS Challenges +

#g138 { --s: 50px; /* control the size */