This page (revision-1) was last changed on 16-Aug-2026 18:10 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
16-Aug-2026 18:10 6 KB UnknownAuthor

Page References

Incoming links Outgoing links
CSSBackgroundPatterns...nobody
CSSBackgroundPatterns

Version management

Difference between version and

1%%add-css
2/*Credit http://bennettfeely.com/gradients/ */
3.bg-pattern-1 {
4background:
5 radial-gradient(
6 circle at bottom left,
7 transparent 0,
8 transparent 2em,
9 beige 2em,
10 beige 4em,
11 transparent 4em,
12 transparent 6em,
13 khaki 6em,
14 khaki 8em,
15 transparent 8em,
16 transparent 10em
17 ),
18 radial-gradient(
19 circle at top right,
20 transparent 0,
21 transparent 2em,
22 beige 2em,
23 beige 4em,
24 transparent 4em,
25 transparent 6em,
26 khaki 6em,
27 khaki 8em,
28 transparent 8em,
29 transparent 10em
30 ),
31 radial-gradient(
32 circle at top left,
33 transparent 0,
34 transparent 2em,
35 navajowhite 2em,
36 navajowhite 4em,
37 transparent 4em,
38 transparent 6em,
39 peachpuff 6em,
40 peachpuff 8em,
41 transparent 8em,
42 transparent 10em
43 ),
44 radial-gradient(
45 circle at bottom right,
46 transparent 0,
47 transparent 2em,
48 palegoldenrod 2em,
49 palegoldenrod 4em,
50 transparent 4em,
51 transparent 6em,
52 peachpuff 6em,
53 peachpuff 8em,
54 transparent 8em,
55 transparent 10em
56 ), blanchedalmond;
57
58background-blend-mode: multiply;
59background-size: 10em 10em;
60background-position: 0 0, 0 0, 5em 5em, 5em 5em;
61}
62.bg-pattern-2 {
63color:white;
64background:
65 radial-gradient(
66 at bottom right,
67 dodgerblue 0,
68 dodgerblue 1em,
69 lightskyblue 1em,
70 lightskyblue 2em,
71 deepskyblue 2em,
72 deepskyblue 3em,
73 gainsboro 3em,
74 gainsboro 4em,
75 lightsteelblue 4em,
76 lightsteelblue 5em,
77 deepskyblue 5em,
78 deepskyblue 6em,
79 lightskyblue 6em,
80 lightskyblue 7em,
81 transparent 7em,
82 transparent 8em
83 ),
84 radial-gradient(
85 at top left,
86 transparent 0,
87 transparent 1em,
88 lightskyblue 1em,
89 lightskyblue 2em,
90 deepskyblue 2em,
91 deepskyblue 3em,
92 lightsteelblue 3em,
93 lightsteelblue 4em,
94 gainsboro 4em,
95 gainsboro 5em,
96 deepskyblue 5em,
97 deepskyblue 6em,
98 skyblue 6em,
99 skyblue 7em,
100 dodgerblue 7em,
101 dodgerblue 8em,
102 transparent 8em,
103 transparent 20em
104 ),
105 radial-gradient(
106 circle at center bottom,
107 coral, darkslateblue
108 );
109
110 background-blend-mode: overlay;
111 background-size:
112 8em 8em, 8em 8em, cover;
113}
114.bg-pattern-3{
115background:
116 repeating-linear-gradient(
117 to top left,
118 beige 0,
119 beige 2em,
120 moccasin 2em,
121 moccasin 4em,
122 wheat 4em,
123 wheat 6em
124 ),
125 repeating-linear-gradient(
126 to left,
127 white 0,
128 white 2em,
129 wheat 2em,
130 wheat 4em,
131 beige 4em,
132 beige 6em
133 ), white;
134
135background-blend-mode: multiply;
136}
137.bg-pattern-4 {
138background:
139 repeating-linear-gradient(
140 45deg,
141 transparent,
142 transparent 1em,
143 moccasin 0,
144 moccasin 2em,
145 transparent 0,
146 transparent 3em,
147 powderblue 0,
148 powderblue 4em,
149 transparent 0,
150 transparent 5em,
151 lavender 0,
152 lavender 6em,
153 transparent 0,
154 transparent 7em,
155 beige 0,
156 beige 8em
157 ),
158 repeating-linear-gradient(
159 -45deg,
160 transparent,
161 transparent 1em,
162 khaki 0,
163 khaki 2em,
164 transparent 0,
165 transparent 3em,
166 beige 0,
167 beige 4em,
168 transparent 0,
169 transparent 5em,
170 peachpuff 0,
171 peachpuff 6em
172 ), whitesmoke;
173
174background-blend-mode: multiply;
175}
176.bg-pattern-5{
177background:
178 linear-gradient(limegreen,transparent),
179 linear-gradient(90deg,skyblue,transparent),
180 linear-gradient(-90deg,coral,transparent);
181
182 background-blend-mode: screen;
183}
184
185.bg-polka {
186
187 background-image:
188 -webkit-gradient(radial, 30 30, 0, 30 30, 45,
189 color-stop(0.4, rgba(255,255,255,0.5)),
190 color-stop(0.44, rgba(255,255,255,0))
191 ),
192 -webkit-gradient(radial, 30 30, 0, 30 30, 45,
193 color-stop(0.4, rgba(255,255,255,0.5)),
194 color-stop(0.44, rgba(255,255,255,0))
195 );
196
197 background-image:
198 -webkit-radial-gradient(30% 30%,circle closest-side,
199 rgba(255,255,225,0.5) 40%,
200 rgba(255,255,225,0) 44%,
201 transparent 100%),
202 -webkit-radial-gradient(30% 30%,circle closest-side,
203 rgba(255,255,225,0.5) 40%,
204 rgba(255,255,225,0) 44%,
205 transparent 100%);
206 background-image:
207 -moz-radial-gradient(30% 30%,circle closest-side,
208 rgba(255,255,225,0.5) 40%,
209 rgba(255,255,225,0) 44%,
210 transparent 100%),
211 -moz-radial-gradient(30% 30%,circle closest-side,
212 rgba(255,255,225,0.5) 40%,
213 rgba(255,255,225,0) 44%,
214 transparent 100%);
215 background-image:
216 -ms-radial-gradient(30% 30%,circle closest-side,
217 rgba(255,255,225,0.5) 40%,
218 rgba(255,255,225,0) 44%,
219 transparent 100%),
220 -ms-radial-gradient(30% 30%,circle closest-side,
221 rgba(255,255,225,0.5) 40%,
222 rgba(255,255,225,0) 44%,
223 transparent 100%);
224 background-image:
225 -o-radial-gradient(30% 30%,circle closest-side,
226 rgba(255,255,225,0.5) 40%,
227 rgba(255,255,225,0) 44%,
228 transparent 100%),
229 -o-radial-gradient(30% 30%,circle closest-side,
230 rgba(255,255,225,0.5) 40%,
231 rgba(255,255,225,0) 44%,
232 transparent 100%);
233
234 background-image:
235 radial-gradient(30% 30%,circle closest-side,
236 rgba(255,255,225,0.5) 40%,
237 rgba(255,255,225,0) 44%,
238 transparent 100%),
239 radial-gradient(30% 30%,circle closest-side,
240 rgba(255,255,225,0.5) 40%,
241 rgba(255,255,225,0) 44%,
242 transparent 100%);
243
244 /*ff 3.6*/-moz-background-size: 100px 100px;
245 background-size: 100px 100px;
246 background-position: 0 0, 50px 50px;
247}
248.bg-small-polka {
249 background-image:
250 -webkit-gradient(radial, 20 20, 0, 20 20, 20,
251 color-stop(0.4, rgba(255,255,255,0.5)),
252 color-stop(0.44, rgba(255,255,255,0))
253 ),
254 -webkit-gradient(radial, 20 20, 0, 20 20, 20,
255 color-stop(0.4, rgba(255,255,255,0.5)),
256 color-stop(0.44, rgba(255,255,255,0))
257 );
258
259 /*ff 3.6*/-moz-background-size: 50px 50px;
260 background-size: 50px 50px;
261 background-position: 0 0, 25px 25px;
262}
263
264.bg-tiny-polka {
265 background-image:
266 -webkit-gradient(radial, 7 7, 0, 7 7, 7,
267 color-stop(0.4, rgba(255,255,255,0.5)),
268 color-stop(0.44, rgba(255,255,255,0))
269 ),
270 -webkit-gradient(radial, 7 7, 0, 7 7, 7,
271 color-stop(0.4, rgba(255,255,255,0.5)),
272 color-stop(0.44, rgba(255,255,255,0))
273 );
274 /*ff 3.6*/-moz-background-size: 20px 20px;
275 background-size: 20px 20px;
276 background-position: 0 0, 10px 10px;
277}
278
279/%
280
281
282[{ALLOW edit Admin}]
283[{ALLOW view All}]
This page (revision-) was last changed on 16-Aug-2026 18:10 by UnknownAuthorTop