JSPWiki: CSSBackgroundGradients

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	2 KB	UnknownAuthor

Page References

Incoming links	Outgoing links
CSSBackgroundGradients...nobody	CSSBackgroundGradients

Version management

Difference between version and

1	%%add-css
2	.bg-warm-flame {background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);}
3	.bg-night-fade {background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);}
4	.bg-spring-warmth {background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);}
5	.bg-juicy-peach {background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);}
6	.bg-lady-lips {background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);}
7	.bg-sunny-morning {background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);}
8	.bg-rainy-ashville {background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);}
9	.bg-frozen-dreams {background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);}
10	.bg-winter-neva {background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);}
11	.bg-dusty-grass {background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);}
12	.bg-tempting-azure {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);}
13	.bg-deep-blue {background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
14	.bg-cloudy-knoxville {background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);}
15	.bg-everlasting-sky {background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);}
16	.bg-plum-plate {background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white;}
17	.bg-wild-apple {background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);}
18	/%
19
20	%%add-css
21	.bg-gradient-1 { background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db); }
22	.bg-gradient-2 { background: linear-gradient(90deg, #cfecd0, #ffc5ca); }
23	.bg-gradient-3 { background: linear-gradient(90deg, #f598a8, #f6edb2); }
24	.bg-gradient-4 { background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);color:#fff; }
25	.bg-gradient-5 { background: linear-gradient(90deg, #b9deed, #efefef); }
26	.bg-gradient-6 { background: linear-gradient(90deg, #aea4e3, #d3ffe8); }
27	.bg-gradient-7 { background: linear-gradient(90deg, #faf0cd, #fab397); }
28	.bg-gradient-8 { background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db); }
29	.bg-gradient-9 { background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);color:#fff; }
30	/%
31
32	%%add-css
33	/circle with center content/
34	.bollen { display:flex; flex-wrap:wrap; position:relative;}
35	.bollen > [[class*=bg-] {
36	display: flex;
37	justify-content: center;
38	align-items: center;
39	text-align: center;
40	border-radius:100%;
41	width:200px; height:200px; margin:.25em;
42	transition: 0.5s all;
43	}
44	.bollen > [[class*=bg-]:hover { border-radius:0;}
45	/%
46
47
48	[{ALLOW edit Admin}]
49	[{ALLOW view All}]