Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="cards">	
	<section class="card bg-wave">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-wave</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	<section class="card bg-spill">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-spill</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	<section class="card bg-swoosh">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-swoosh</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	<section class="card bg-target">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-target</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	<section class="card bg-arrow-r">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-arrow-r</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	<section class="card bg-arrow-d">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-arrow-d</main>
			<footer class="card__footer"></footer>
		</div>
	</section>	
	<section class="card bg-slash-h">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-slash-h</main>
			<footer class="card__footer"></footer>
		</div>
	</section>		
	<section class="card bg-slash-v">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-slash-v</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	<section class="card bg-path">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-path</main>
			<footer class="card__footer"></footer>
		</div>
	</section>	
	<section class="card bg-munch">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-munch</main>
			<footer class="card__footer"></footer>
		</div>
	</section>	
	<section class="card bg-off-air">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-off-air</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	
	<section class="card bg-polka-dots">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-polka-dots</main>
			<footer class="card__footer"></footer>
		</div>
	</section>
	
	<section class="card bg-dots">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-dots</main>
			<footer class="card__footer"></footer>
		</div>
	</section>	
	
	<section class="card bg-HOLD">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-HOLD</main>
			<footer class="card__footer"></footer>
		</div>
	</section>	
	
	<section class="card bg-HOLD">
		<div class="card__content">
			<header class="card__header"></header>
			<main class="card__body">.bg-HOLD</main>
			<footer class="card__footer"></footer>
		</div>
	</section></div>



              
            
!

CSS

              
                //
// Don't forget vendor prefixes!
//
// <3 Inspired by Kedar <3
// https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20
//
// <3 Inspired by Kevin Powell <3
// https://www.youtube.com/user/KepowOb
//
// <3 Inspired by LeaVerou <3
// https://leaverou.github.io/conic-gradient/
//


/**
 * Change dimensions to see stretch-squish effect.
 * ===================================*/
.card {
		min-height: 200px;
		max-width: 720px;
}

/**
 * .bg-wave
 * ===================================*/
@mixin bg-wave($lt:#9E9E9E, $md:#616161, $dk:#424242) {
		background: 
		// dark wave
		radial-gradient(
			at 10% 0%,
			rgba(0,0,0,0)60%,			
			$dk 60%,
		),
		// light wave 
		radial-gradient(
			at 30% 10%,
			rgba(0,0,0,0)50%,			
			$lt 50%,
		),		
		// top circles
		radial-gradient(
			circle at 29% 0%,
			$lt 8%,
			rgba(0,0,0,0)8%,
		),
		radial-gradient(
			circle at 31% 0%,
			$dk 13%,
			$md 13%,
		),
		$dk; // background
}

.bg-wave {
	// @include bg-wave();
	@include bg-wave(#18FFFF, #00E5FF, #00B8D4);
} 


/**
 * .bg-spill
 * ===================================*/
@mixin bg-spill($lt:#9E9E9E, $md:#616161, $dk:#424242) {
		$xlt: scale-color($lt, $lightness: 30%);
    background: 
			radial-gradient(
				at top left,
				$xlt 17%, 
				$md 17%, 
				$md 27.5%,
				$lt 27.5%,
				$lt 44.6%,
				$dk 44.6%,
				$dk 72%,
				$md 72%,
			),
			$md; // background		
} //

.bg-spill {
	@include bg-spill(#FF6E40, #FF3D00, #DD2C00);
	// @include bg-spill();	
} 


/**
 * .bg-swoosh
 * ===================================*/
@mixin bg-swoosh($lt:#9E9E9E, $md:#616161, $dk:#424242) {
	background: 	
		// top-left-corner
		radial-gradient(
			circle at right bottom, 
			rgba(0,0,0,0) 80%, 
			$md 80%, 
		),					
		// middle + bottom-right
		radial-gradient(
			farthest-corner at 0% -20%,
			$lt 68%,  
			$dk 68%, 
		)
		$dk; // background
} //

.bg-swoosh { 
	@include bg-swoosh(#7C4DFF, #651FFF, #6200EA); 
	// @include bg-swoosh();
}


/**
 * .bg-target
 * ======================================*/
@mixin bg-target($lt:#9E9E9E, $md:#616161, $dk:#424242) {
	$xdk: scale-color($dk, $lightness: -30%);
    background: 
			radial-gradient(
				circle at 75% 30%,
				rgba(0,0,0,0) 18%,
				$lt 18%,			
				$lt 23%,
				rgba(0,0,0,0) 23%,
			),		
			radial-gradient(
				circle at 75% 30%,
				rgba(0,0,0,0) 25%,
				$dk 25%,			
				$dk 38%,
				rgba(0,0,0,0) 38%,
			),			
			radial-gradient(
				circle at 75% 30%,
				$xdk 8%,
				rgba(0,0,0,0) 8%,
				rgba(0,0,0,0) 15%,
				$xdk 15%,
				$xdk 40%,
				rgba(0,0,0,0) 40%,
			),
			$md;		
} //

.bg-target {
	@include bg-target(#ff3232, red, #cc0000);
	// @include bg-target();	
} 


/**
 * .bg-arrow-r
 * ===================================*/
@mixin bg-arrow-r($left:#9E9E9E, $mid:#616161, $right:#424242) {
	background: 
		// right top
		linear-gradient(
			45deg,
			rgba(0,0,0,0) 60%,			
			$right 60%,
		),	
		// right bottom
		linear-gradient(
			135deg,
			rgba(0,0,0,0) 70%,			
			$right 70%,		
		),			
		// middle top
		linear-gradient(
			45deg,
			rgba(0,0,0,0) 40%,			
			$mid 40%,
		),			
		// midle bottom
		linear-gradient(
			135deg,
			rgba(0,0,0,0) 50%,			
			$mid 50%,		
		),		
		$left // background	
}

.bg-arrow-r {
	@include bg-arrow-r(#FFD740, #FFA000, #2962FF);
	// @include bg-arrow-r();
}


/**
 * .bg-arrow-d
 * ===================================*/
@mixin bg-arrow-d($top:#616161, $mid:#9E9E9E, $bot:#424242) {
	background: 		
		// bottom left
		linear-gradient(
			21deg,
			$bot 38%,			
			rgba(0,0,0,0) 38%,
		),	
		// bottom right
		linear-gradient(
			159deg,
			rgba(0,0,0,0) 74%,			
			$bot 74%,	
		),		
		// middle left
		linear-gradient(
			21deg,
			$mid 58%,			
			rgba(0,0,0,0) 58%,
		),	
		// middle right
		linear-gradient(
			159deg,
			rgba(0,0,0,0) 54%,			
			$mid 54%,	
		),	
		// top
		$top // background	
	
} //

.bg-arrow-d {
	@include bg-arrow-d(#FF4088, #FF80AB, #F50057);
	// @include bg-arrow-d();
}

/**
 * .bg-slash-h
 * ===================================*/
@mixin bg-slash-h($top:#757575, $bot:#424242) {
		background: linear-gradient(
			160deg, 
			$top 45%,		
			$bot 45%, 
		);
} //

.bg-slash-h {
	@include bg-slash-h(#BCAAA4, #D7CCC8);
	// @include bg-slash-h();
}


/**
 * .bg-slash-v
 * ===================================*/
@mixin bg-slash-v($left:#757575, $right:#424242) {
  background: linear-gradient(
		118deg, 
		$left 45%, 
		$right 45%,)
		$right; 
} //

.bg-slash-v {
	@include bg-slash-v(#536DFE, #304FFE);
	// @include bg-slash-v();
} 


/**
 * .bg-path
 * ===================================*/
@mixin bg-path($bg:#424242, $path:#212121, $curb:#9E9E9E) {
		background: 
			linear-gradient(
				34deg, 
				rgba(0,0,0,0) 70%, 
				$curb 70%,
				$curb 73%,
				$bg 73%,
			),
			linear-gradient(
				70deg, 
				$bg 21%, 
				$curb 21%, 
				$curb 24%, 
				$path 24%,
			), 
			$bg; // background
} //

.bg-path {
	// @include bg-path(#FF3D00, #DD2C00, #FF6E40);
	@include bg-path();	
} 


/**
 * .bg-munch
 * ===================================*/
@mixin bg-munch($bg:#BCAAA4, $bar:#4E342E) {
	$high: scale-color($bar, $lightness: 30%);
	$shad: scale-color($bar, $lightness: -20%);
	background: 
		radial-gradient(
			circle at left 26px bottom 10px,
			$bg 48px,
			rgba(0,0,0,0) 48px
		),	
		radial-gradient(
			circle at left 20px bottom 20px,
			$shad 64px,
			rgba(0,0,0,0) 64px,
		),	
		// top
		linear-gradient(
			to bottom,
			$high 10px,			
			rgba(0,0,0,0) 10px,
		),	
		// right
		linear-gradient(
			to left,
			$high 16px,			
			rgba(0,0,0,0) 16px,
		),	
		// bottom
		linear-gradient(
			to top,
			$shad 16px,			
			rgba(0,0,0,0) 16px,
		),

		// left
		linear-gradient(
			to right,
			$high 8px,			
			rgba(0,0,0,0) 8px,
		),	
		$bar; 
	
} //

.bg-munch {
	@include bg-munch(#F8BBD0,#FF4081);
	// @include bg-munch();
} 


/**
 * .bg-off-air
 * ===================================*/
@mixin bg-off-air {
		background: 
		linear-gradient(
			to top,
			rgba(0,0,0,0) 21%,			
			#212121 21%,
			#212121 95%,
			rgba(0,0,0,0) 95%,
		),
		linear-gradient(
			to right,
			yellow 16.66%,
			cyan 16.66%,
			cyan 33.33%,
			lime 33.33%,
			lime 50%,		
			fuchsia 50%,
			fuchsia 66.65%,
			red 66.65%,
			red 83.3%,
			blue 83.3%,
			blue 100%,
		)
		#212121; 
} //

.bg-off-air {
	@include bg-off-air;
}

/**
 * .bg-polka-dots
 * ===================================*/
@mixin bg-polka-dots ($bg:#000000, $dots:#ffffff) {
	background-color: $bg;
	background-image: 
		radial-gradient($dots 36%, transparent 0), 
		radial-gradient($dots 36%, transparent 0);
	background-size: 72px 72px;
	background-position: 0 0, 36px 36px;	
} // 

.bg-polka-dots {
	@include bg-polka-dots (#00E5FF);
	color: #000 !important;
}



/**
 * Hold
 * ===================================*/
@mixin bg-hold ($color1:#000000, $color2:#FFFFFF) {

} // 

.bg-hold {

}



/**
 * CODEPEN - Safe to ignore
 * ===================================*/
.card {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 30px auto;	
	
	font-family: 'Open Sans Condensed';
	font-weight: 700;
	font-size: 60px;
	color: #ffffff;
	border: 1px solid #d2d2d2;
	border-radius: 4px;
	box-shadow: 0px 2px 5px 0px rgba(black, 0.2);
}

.card-content {padding: 30px;}

              
            
!

JS

              
                
              
            
!
999px

Console