CSS Gradients – No Panic Design

These gradient patterns are built entirely with CSS.

Click the titles to reveal their code.

Plaid 50

							
					.plain50 {
    background:
	repeating-linear-gradient(
		50deg,
		#F7A37B,
		#F7A37B 1em,
		#FFDEA8 1em,
		#FFDEA8 2em,
		#D0E4B0 2em,
		#D0E4B0 3em,
		#7CC5D0 3em,
		#7CC5D0 4em,
		#00A2E1 4em,
		#00A2E1 5em,
		#0085C8 5em,
		#0085C8 6em
	),
	repeating-linear-gradient(
		-50deg,
		#F7A37B,
		#F7A37B 1em,
		#FFDEA8 1em,
		#FFDEA8 2em,
		#D0E4B0 2em,
		#D0E4B0 3em,
		#7CC5D0 3em,
		#7CC5D0 4em,
		#00A2E1 4em,
		#00A2E1 5em,
		#0085C8 5em,
		#0085C8 6em
	);
	
background-blend-mode: multiply;
}
				
			
		

Overlapping Circles

							
					.overlap {
background:
	radial-gradient(
		transparent 0,
		transparent 2em,
		lightblue 2em,
		lightblue 2.5em,
		transparent 2.5em,
		transparent 100%
	),
	radial-gradient(
		transparent 0,
		transparent 2em,
		aquamarine 2em,
		aquamarine 2.5em,
		transparent 2.5em,
		transparent 100%
	),
	radial-gradient(
		transparent 0,
		transparent 2em,
		khaki 2em,
		khaki 2.5em,
		transparent 2.5em,
		transparent 100%
	),
	radial-gradient(
		transparent 0,
		transparent 2em,
		pink 2em,
		pink 2.5em,
		transparent 2.5em,
		transparent 100%
	), linen;


background-blend-mode: multiply;
background-size: 5em 5em;
background-position:
	0 2.5em,
	2.5em 0,
	2.5em 2.5em,
	0 0;
}
				
			
		

Wheat Plaid

							
					.wheat {
background:
	repeating-linear-gradient(
		to top left,
		beige 0,
		beige 2em,
		moccasin 2em,
		moccasin 4em,
		wheat 4em,
		wheat 6em
	),
	repeating-linear-gradient(
		to left,
		white 0,
		white 2em,
		wheat 2em,
		wheat 4em,
		beige 4em,
		beige 6em
	), white;

background-blend-mode: multiply;
}
				
			
		

Crimson Tartan

							
					.crimson {
background:
	repeating-linear-gradient(
		90deg,
		firebrick,
		firebrick 20px,
		beige 0,
		beige 25px,
		forestgreen 0,
		forestgreen 35px,
		gold 0,
		gold 40px,
		crimson 0,
		crimson 60px
	),
	repeating-linear-gradient(
		firebrick,
		firebrick 20px,
		beige 0,
		beige 25px,
		forestgreen 0,
		forestgreen 35px,
		gold 0,
		gold 40px,
		crimson 0,
		crimson 60px
	);
	
background-blend-mode: multiply;
}
				
			
		

Orange & Blue Tartan

							
					.orange {
background:
	linear-gradient(
		crimson -7.5%,
		crimson 2.5%,
		orangered -5%,
		orangered 5%,
		orange -2.5%,
		orange 7.5%,
		gold 0%,
		gold 10%,
		#fff 2.5%,
		#fff 12.5%,
		lightblue 5%,
		lightblue 15%,
		skyblue 7.5%,
		skyblue 17.5%,
		steelblue 10%,
		steelblue 20%,
		#38678f 12.5%,
		#38678f 22.5%,
		skyblue 15%,
		skyblue 25%,
		#38678f 17.5%,
		#38678f 27.5%,
		steelblue 20%,
		steelblue 30%,
		skyblue 22.5%,
		skyblue 32.5%,
		lightblue 25%,
		lightblue 35%,
		#fff 27.5%,
		white 37.5%,
		gold 30%,
		gold 40%,
		orange 32.5%,
		orange 42.5%,
		orangered 35%,
		orangered 45%,
		crimson 37.5%,
		crimson 47.5%,
		gold 40%,
		gold 50%,
		crimson 42.5%,
		crimson 52.5%,
		orangered 45%,
		orangered 55%,
		orange 47.5%,
		orange 57.5%,
		gold 50%,
		gold 60%,
		#fff 52.5%,
		#fff 62.5%,
		lightblue 55%,
		lightblue 65%,
		skyblue 57.5%,
		skyblue 67.5%,
		steelblue 60%,
		steelblue 70%,
		#38678f 62.5%,
		#38678f 72.5%,
		skyblue 65%,
		skyblue 75%,
		#38678f 67.5%,
		#38678f 77.5%,
		steelblue 70%,
		steelblue 80%,
		skyblue 72.5%,
		skyblue 82.5%,
		lightblue 75%,
		lightblue 85%,
		#fff 77.5%,
		#fff 87.5%,
		gold 80%,
		gold 90%,
		orange 82.5%,
		orange 92.5%,
		orangered 85%,
		orangered 95%,
		crimson 87.5%,
		crimson 97.5%,
		gold 90%,
		gold 100%),
	linear-gradient(
		90deg,
		crimson -7.5%,
		crimson 2.5%,
		orangered -5%,
		orangered 5%,
		orange -2.5%,
		orange 7.5%,
		gold 0%,
		gold 10%,
		#fff 2.5%,
		#fff 12.5%,
		lightblue 5%,
		lightblue 15%,
		skyblue 7.5%,
		skyblue 17.5%,
		steelblue 10%,
		steelblue 20%,
		#38678f 12.5%,
		#38678f 22.5%,
		skyblue 15%,
		skyblue 25%,
		#38678f 17.5%,
		#38678f 27.5%,
		steelblue 20%,
		steelblue 30%,
		skyblue 22.5%,
		skyblue 32.5%,
		lightblue 25%,
		lightblue 35%,
		#fff 27.5%,
		#fff 37.5%,
		gold 30%,
		gold 40%,
		orange 32.5%,
		orange 42.5%,
		orangered 35%,
		orangered 45%,
		crimson 37.5%,
		crimson 47.5%,
		gold 40%,
		gold 50%,
		crimson 42.5%,
		crimson 52.5%,
		orangered 45%,
		orangered 55%,
		orange 47.5%,
		orange 57.5%,
		gold 50%,
		gold 60%,
		#fff 52.5%,
		#fff 62.5%,
		lightblue 55%,
		lightblue 65%,
		skyblue 57.5%,
		skyblue 67.5%,
		steelblue 60%,
		steelblue 70%,
		#38678f 62.5%,
		#38678f 72.5%,
		skyblue 65%,
		skyblue 75%,
		#38678f 67.5%,
		#38678f 77.5%,
		steelblue 70%,
		steelblue 80%,
		skyblue 72.5%,
		skyblue 82.5%,
		lightblue 75%,
		lightblue 85%,
		#fff 77.5%,
		#fff 87.5%,
		gold 80%,
		gold 90%,
		orange 82.5%,
		orange 92.5%,
		orangered 85%,
		orangered 95%,
		crimson 87.5%,
		crimson 97.5%,
		gold 90%,
		gold 100%
	), orangered;

background-size: 10em 10em;
background-blend-mode: multiply, normal;
}
				
			
		

Bold Plaid

							
					.boldplaid {
background:
	repeating-linear-gradient(
		#F3F5C4 0,
		#F3F5C4 3em,
		#F19181 3em,
		#F19181 6em
	),
	repeating-linear-gradient(
		90deg,
		#F9CB8F 0,
		#F9CB8F 3em,
		#3CBAC8 3em,
		#3CBAC8 6em
	),
	repeating-linear-gradient(
		45deg,
		transparent 0,
		transparent 6em,
		#F19181 12em
	),
	repeating-linear-gradient(
		-45deg,
		transparent 0,
		transparent 6em,
		#F19181 12em
	);

background-blend-mode: multiply;
}
				
			
		

Radial Green

							
					.radialgreen {
background:
	repeating-radial-gradient(
		circle at 50% 25%,
		limegreen,
		limegreen .5em,
		transparent 3em,
		transparent 4em
	),
	repeating-radial-gradient(
		circle at 25% 50%,
		olivedrab,
		olivedrab .5em,
		transparent 2em,
		transparent 4em
	),
	repeating-radial-gradient(
		circle at 75% 50%,
		green,
		green .5em,
		transparent 2em,
		transparent 4em
	), lightgreen;

background-blend-mode: multiply;
}
				
			
		

Radial Pink & Gold

							
					.radialpink {
background:
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 3em,
		hotpink 1em,
			transparent 6em,
		tomato 6.5em
	),
	repeating-radial-gradient(
		ellipse farthest-corner,
		transparent 1em,
		cornflowerblue 1em,
		 	transparent 5em,
		cornflowerblue 2em
	),
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 3em,
		gold 1em,
			transparent 2em,
		gold 4em
	),
	repeating-radial-gradient(
		circle,
		transparent 3em,
		gold 1em,
			transparent 2em,
		gold 4em
	), white;

background-blend-mode: multiply;
background-size: 10em 10em;
background-position: 0 0, 5em 5em, 15em 50em;
}
				
			
		

Radial Purple & Orange

							
					.radialpurple {
background:
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(128,0,128,.4) 31%,
		rgba(128,0,128,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(128,0,128,.4) 51%,
		rgba(128,0,128,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(0,0,139,.4) 31%,
		rgba(0,0,139,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(0,0,139,.4) 51%,
		rgba(0,0,139,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(220,20,60,.4) 31%,
		rgba(220,20,60,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(220,20,60,.4) 51%,
		rgba(220,20,60,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(255,69,0,.4) 31%,
		rgba(255,69,0,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(255,69,0,.4) 51%,
		rgba(255,69,0,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(255,215,0,.4) 31%,
		rgba(255,215,0,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(255,215,0,.4) 51%,
		rgba(255,215,0,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(154,205,50,.4) 31%,
		rgba(154,205,50,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(154,205,50,.4) 51%,
		rgba(154,205,50,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(70,130,180,.4) 31%,
		rgba(70,130,180,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(70,130,180,.4) 51%,
		rgba(70,130,180,.4) 55%,
		rgba(255,255,255,.2) 56%
	), orangered;

	background-size:
		13em 13em,
		11em 11em,
		5em 5em,
		11em 11em,
		7em 7em,
		5em 5em,
		3em 3em,
		1em 1em;
	background-position:
		50% 50%,
		20% 20%,
		30% 30%,
		70% 70%;
	background-blend-mode:
		overlay,
		normal,
		hard-light,
		overlay,
		multiply,
		soft-light;
}

				
			
		

Wavy

							
					.wavy {
background:
	radial-gradient(
			at bottom right,
			dodgerblue 0,
			dodgerblue 1em,
			lightskyblue 1em,
			lightskyblue 2em,
			deepskyblue 2em,
			deepskyblue 3em,
			gainsboro 3em,
			gainsboro 4em,
			lightsteelblue 4em,
			lightsteelblue 5em,
			deepskyblue 5em,
			deepskyblue 6em,
			lightskyblue 6em,
			lightskyblue 7em,
			transparent 7em,
			transparent 8em
		),
		radial-gradient(
			at top left,
			transparent 0,
			transparent 1em,
			lightskyblue 1em,
			lightskyblue 2em,
			deepskyblue 2em,
			deepskyblue 3em,
			lightsteelblue 3em,
			lightsteelblue 4em,
			gainsboro 4em,
			gainsboro 5em,
			deepskyblue 5em,
			deepskyblue 6em,
			skyblue 6em,
			skyblue 7em,
			dodgerblue 7em,
			dodgerblue 8em,
			transparent 8em,
			transparent 20em
		),
		radial-gradient(
			circle at center bottom,
			coral, darkslateblue
		);
	
	background-blend-mode: overlay;
	background-size:
		8em 8em, 8em 8em, cover;
}
				
			
		

Concentric

							
					.style3 {
  background-image: repeating-radial-gradient
  (circle 10em at left top, rgb(172, 205, 212) 0%,
  rgb(24, 154, 177) 50%,rgb(8, 123, 149) 51%,
  rgb(112, 192, 209) 100%);
  
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170, 0), 
    inset 0 0 20px rgba(255, 255, 255, 0), 
    10px 10px 18px rgba(55, 84, 170, 0.15), 
    -10px -10px 22px white, 
    inset 0px 0px 4px rgba(255, 255, 255, 0.2);
}
				
			
		

Visual Code

Design Tools

These gradient patterns are built entirely with CSS.

Plaid 50

Overlapping Circles

Wheat Plaid

Crimson Tartan

Orange & Blue Tartan

Bold Plaid

Radial Green

Radial Pink & Gold

Radial Purple & Orange

Wavy

Concentric

Search

Need Support?

Client Portal

Search

Need Support?

support@npd

Client Portal

© 2021 – 2024 NO PANIC DESIGN

Cool Stuff

Visual Code

Design Tools

Visual Code

Design Tools