A simple Sass mixin for linear fade-out overlays. Uses Bourbon's +background-image mixin for the gradients. Replace rows 15, 23, 31, 39 if you want to use your own gradient code or replace with radial gradients for a vignette effect. Uses 'after' as default but can be extended to 'before' with a simple pass to the $pseudo variable. Added optiona…

_pseudoFade.sass

=pseudoFade($start: bottom, $size: 30px, $color: #000, $edge: 0px, $pseudo: after, $z-index: false)
	position: relative
	&:#{$pseudo}
		content: ""
		display: block
		position: absolute
		-webkit-touch-callout: none
		-webkit-user-select: none
		-khtml-user-select: none
		-moz-user-select: none
		-ms-user-select: none
		user-select: none
		pointer-events: none
		@if $z-index
			z-index: $z-index
		@if $start == 'bottom'
			+background-image(linear-gradient(rgba($color, 0), rgba($color, 1)))
			left: $edge
			right: $edge
			bottom: $edge
			top: auto
			height: $size
			width: auto
		@if $start == 'top'
			+background-image(linear-gradient(rgba($color, 1), rgba($color, 0)))
			top: $edge
			left: $edge
			right: $edge
			bottom: auto
			height: $size
			width: auto
		@if $start == 'left'
			+background-image(linear-gradient(left, rgba($color, 1), rgba($color, 0)))
			top: $edge
			left: $edge
			bottom: $edge
			right: auto
			width: $size
			height: auto
		@if $start == 'right'
			+background-image(linear-gradient(right, rgba($color, 1), rgba($color, 0)))
			top: $edge
			bottom: $edge
			right: $edge
			left: auto
			width: $size
			height: auto