Cool CSS

that I wrote (Background image source

Here are some cool css backgrounds I played around with while making this website:

6-color pride flag

background-image: linear-gradient( transparent 0%,
				  #FF0018 0%, #FF0018 16.6%,
				  #FFA52C 16.6%, #FFA52C 33.2%,
                  #FFFF41 33.2%, #FFFF41 50%,
                  #008018 50%, #008018 66.6%,
                  #0000F9 66.6%, #0000F9 83.2%,
                  #86007D 83.2%, #86007D 100%,
                  transparent 100%);

8-color pride flag

background-image: linear-gradient( transparent 0%,
                  #ff69b6 0%, #ff69b6 12.5%,
				  #FF0018 12.5%, #FF0018 25%,
				  #FFA52C 25%, #FFA52C 37.5%,
                  #FFFF41 37.5%, #FFFF41 50%,
                  #008018 50%, #008018 62.5%,
                  #00C0C0 62.5%, #00C0C0 75%,
                  #400098 75%, #400098 87.5%,
                  #86007D 87.5%, #86007D 100%,
                  transparent 100%);

Landing Page

background-color: #FFFFFF;
background-image: radial-gradient( 50% 50% at top,
                  #ff69b6 0%, #ff69b6 12.5%,
				  #FF0018 12.5%, #FF0018 25%,
				  #FFA52C 25%, #FFA52C 37.5%,
                  #FFFF41 37.5%, #FFFF41 50%,
                  #008018 50%, #008018 62.5%,
                  #00C0C0 62.5%, #00C0C0 75%,
                  #400098 75%, #400098 87.5%,
                  #86007D 87.5%, #86007D 100%,
                  transparent 100%),
				  radial-gradient( 50% 50% at bottom,
                  #86007D 0%, #86007D 12.5%,
                  #400098 12.5%, #400098 25%,
                  #00C0C0 25%, #00C0C0 37.5%,
                  #008010 37.5%, #008010 50%,
                  #FFFF41 50%, #FFFF41 62.5%,
                  #FFA52C 62.5%, #FFA52C 75%,
                  #FF0018 75%, #FF0018 87.5%,
                  #FF69B6 87.5%, #FF69B6 100%,
                  transparent 100%);
background-position: 0 0, 50px 0;
background-size: 100px 100px;

Matrix grid

background: #002;
background-image: 
  linear-gradient(
    transparent 49.5%, #0A0 49.5%, 
	#0A0 50.5%, transparent 50.5%
  ), 
  linear-gradient(
    15deg,
	transparent 7.5%, #0A0 7.5%,
	#0A0 8.5%, transparent 8.5%,
	transparent 28.5%, #0A0 28.5%,
	#0A0 29.5%,	transparent 29.5%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 70.5%, #0A0 70.5%,
	#0A0 71.5%,	transparent 71.5%,
	transparent 91.5%, #0A0 91.5%,
	#0A0 92.5%,	transparent 92.5%
  ), 
  linear-gradient(
    30deg,
	transparent 13%, #0A0 13%,
	#0A0 14%, transparent 14%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 86%, #0A0 86%,
	#0A0 87%, transparent 87%
  ), 
  linear-gradient(
    45deg,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%
  ), 
  linear-gradient(
    60deg,
    transparent 13%, #0A0 13%,
	#0A0 14%, transparent 14%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 86%, #0A0 86%,
	#0A0 87%, transparent 87%
  ), 
  linear-gradient(
    75deg,
    transparent 7.5%, #0A0 7.5%,
	#0A0 8.5%, transparent 8.5%,
	transparent 28.5%, #0A0 28.5%,
	#0A0 29.5%, transparent 29.5%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 70.5%, #0A0 70.5%,
	#0A0 71.5%, transparent 71.5%,
	transparent 91.5%, #0A0 91.5%,
	#0A0 92.5%, transparent 92.5%
  ), 
  linear-gradient(
    90deg,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%
  ),
  linear-gradient(
    -15deg,
	transparent 7.5%, #0A0 7.5%,
	#0A0 8.5%, transparent 8.5%,
	transparent 28.5%, #0A0 28.5%,
	#0A0 29.5%,	transparent 29.5%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 70.5%, #0A0 70.5%,
	#0A0 71.5%,	transparent 71.5%,
	transparent 91.5%, #0A0 91.5%,
	#0A0 92.5%,	transparent 92.5%
  ), 
  linear-gradient(
    -30deg,
	transparent 13%, #0A0 13%,
	#0A0 14%, transparent 14%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 86%, #0A0 86%,
	#0A0 87%, transparent 87%
  ), 
  linear-gradient(
    -45deg,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%
  ), 
  linear-gradient(
    -60deg,
    transparent 13%, #0A0 13%,
	#0A0 14%, transparent 14%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 86%, #0A0 86%,
	#0A0 87%, transparent 87%
  ), 
  linear-gradient(
    -75deg,
    transparent 7.5%, #0A0 7.5%,
	#0A0 8.5%, transparent 8.5%,
	transparent 28.5%, #0A0 28.5%,
	#0A0 29.5%, transparent 29.5%,
    transparent 49.5%, #0A0 49.5%,
    #0A0 50.5%, transparent 50.5%,
	transparent 70.5%, #0A0 70.5%,
	#0A0 71.5%, transparent 71.5%,
	transparent 91.5%, #0A0 91.5%,
	#0A0 92.5%, transparent 92.5%
  );
background-size: 10em 10em;

Plants

background-color: #88FFBB;
background-image: radial-gradient( 8% 8% at 86% 90%,
                  #400098 0%, #400098 12.5%,
                  #00C0C0 87.5%, #00C0C0 100%,
                  transparent 100%),
				  radial-gradient( 8% 8% at 20% 80%,
                  #400098 0%, #400098 12.5%,
                  #00C0C0 87.5%, #00C0C0 100%,
                  transparent 100%),
				  radial-gradient( 8% 8% at 55% 32%,
                  #400098 0%, #400098 12.5%,
                  #00C0C0 87.5%, #00C0C0 100%,
                  transparent 100%),
				  
                  linear-gradient(22deg,
				  transparent 0%, transparent 94%, 
				  #00E800 94%, #007400 100%,
				  transparent 100%), 
				  linear-gradient(-45deg,
				  transparent 0%, transparent 5%, 
				  #007400 5%, #00E800 10%,
				  transparent 10%), 
                  radial-gradient( 30% 30% at 0% 20%,
                  transparent 0%, transparent 33.3%,
                  #00E800 33.3%, #007400 66.6%, 
				  transparent 66.6%,  transparent 100%),
				  radial-gradient( 30% 30% at 100% 0%,
                  transparent 0%, transparent 33.3%,
                  #007400 33.3%, #00E800 66.6%,
                  transparent 66.6%, transparent 100%),
				  linear-gradient(22deg,
				  transparent 0%, transparent 22%, 
				  #00E800 22%, #007400 29%,
				  transparent 29%), 

                  radial-gradient( 8% 8% at 83% 60%,
                  #86007D 0%, #86007D 12.5%,
                  #FF69B6 87.5%, #FF69B6 100%,
                  transparent 100%),
				  radial-gradient( 8% 8% at 75% 78%,
                  #86007D 0%, #86007D 12.5%,
                  #FF69B6 87.5%, #FF69B6 100%,
                  transparent 100%),
				  radial-gradient( 8% 8% at 20% 20%,
                  #86007D 0%, #86007D 12.5%,
                  #FF69B6 87.5%, #FF69B6 100%,
                  transparent 100%),

                  radial-gradient( 50% 50% at left,
                  transparent 0%, transparent 33.3%,
                  #008600 33.3%, #004300 66.6%, 
				  transparent 66.6%,  transparent 100%),
				  radial-gradient( 50% 50% at right,
                  transparent 0%, transparent 33.3%,
                  #004300 33.3%, #008600 66.6%,
                  transparent 66.6%, transparent 100%),
				  
				  linear-gradient(45deg, #22AA77 15%, transparent 25%), 
				  linear-gradient(315deg, #22AA77 15%, transparent 25%);
background-position: 0 50px, 0 0;
background-size: 100px 100px;

Portal pane

background-color: #FFFFFF;
background-image: radial-gradient( 20% 20% at center,
                  #FFFFFF 0%, #CCCCCC 100%,
                  transparent 100%);
background-size: 20px 20px;

Blue sky gradient

background-image: linear-gradient( transparent 0%,
				  #2288FF 0%, #2288FF 20%,
				  #FFFFFF 95%, transparent 100%);