#main-container
	// Titles
	#title
		h1 LONG SHADOW GENERATOR
	// Values
	#val-container
			h3 Values
			ul#values
				li: label
					p Length: 
					input#length(name="length",
						type="range",
						min="0",
						max="1000",
						step="1",
						value="50"
					)
					p.note *Amount of pixels that the shadow should extend
				li: label
					p Smoothing:
					input#smooth(name="smooth",
						type="range",
						min="0",
						max="10",
						step="1",
						value="0"
					)
					p.note *determines how smooth the shadow should be (check the learn more for more info)
				li: label
					p Color: 
					input#colora.color(name="colora",
						type="text",
						value="#3ccec2"
					)
					button#link-colors.fa.fa-link(value="on",
						title="Link color values"
					)
					input#colorb.color(name="colorb",
						type="text",
						value="#82FFE0")
					p.note *color value, any acceptable css color system will work (rgb, hsl, hex, etc.)
				li: label
					p Angle:
					button#angle1: .fa.fa-long-arrow-right.btn-text.btn-text1
					button#angle2: .fa.fa-long-arrow-right.btn-text.btn-text2
					button#angle3: .fa.fa-long-arrow-right.btn-text.btn-text3
					button#angle4: .fa.fa-long-arrow-right.btn-text.btn-text4
	// Copy Button
	#copy-btn
		button.copy Copy Code
	
	// Example
	#examples
		h3 Examples
		.example Lorem ipsum
	
	// Buttons
	#btn-container
		button.learn-more Learn More
		button.show-code Show Code
		
// Slide outs
#learn-more-cont(style="display: none;")
	#close-learn-more.fa.fa-times.fa-2x
	
	h3 How does it work?
	p This method uses the text-shadow or box-shadow CSS attribute and iterates on it multiple times to add a sharp edged shadow for every pixel in a certain angle. This can be done either manually, using a generator such as this one, which I designed a prototype for months back for personal projects, and also a SASS mixin, which is what I finally converted to, as it's much easier. The mixin can be seen in the CSS portion of this Pen.
	p A visualization of this method can be seen below:
	
	h3 Soft Shadows
	p This is a fairly simple addition, it basically just blurs more each pixel of shadow. This is a fairly finicky value, as a value of 1 will add a single pixel of blur for every shadow iteration down the line, though it can have a nice effect when used subtly.

#code-cont(style="display:none;")
	#close-code.fa.fa-times.fa-2x
View Compiled
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400|Open+Sans+Condensed:300)

//
// FUNCTIONS
//
// LONG SHADOW
@function makelongshadow($color, $length)
	$val: 0px 0px $color
	@for $i from 1 through $length
		$val: #{$val}, #{$i}px #{$i}px #{$color}
	@return $val

//
// MIXINS
//
// LONG SHADOW
@mixin longshadow($type, $color, $length)
	@if $type == "text"
		text-shadow : makelongshadow($color, $length)
	@if $type == "box"
		box-shadow  : makelongshadow($color, $length)

// VARS
$font1: "Montserrat"
$font2: "Open Sans"
$font3: "Open Sans Condensed"

$facebook  : #3b5998
$soundcloud: #ff4d00
$youtube   : #bb0000
$instagram : #df00b8
$twitter   : #00aced
$webpage   : #09649f
$bandcamp  : #639aa9

// Set Default
*
	font-family: $font1
	margin: 0
	padding: 0

button:focus
	outline: 0

::-webkit-scrollbar
	display: none

// Misc
.indent1
	padding: 0px 20px
	margin: 0
// Element Styling
html
	width: 100%
	height: 100%
	// Main Container
	#main-container
		background: linear-gradient(45deg, #9bffeb, #56ffcc)
		height: 100vh
		overflow: hidden
		// Title
		#title
			padding: 40px 0px
			overflow: hidden
			h1
				text-align: center
				color: white
				opacity: 0.8
				@include longshadow("text", desaturate(#0bffeb, 40%), 800)
		// Values
		#val-container
			background-color: hsl(5,0%,96%)
			margin-top: 0px
			h3
				text-align: center
				color: hsl(5,0%,70%)
				font-family: $font2
			ul#values
				padding: 10px
				display: block
				list-style: none
				li
					padding: 1px
					margin: 10px 0
					p:not(.btn-text)
						display: inline-block
						width: 100px
						text-align: right
						vertical-align: middle
						&.note
							color: lighten(black, 70%)
							font-size: .8em
							font-family: $font3
							width: auto
							padding-left: 5px
					input
						display: inline-block
						vertical-align: middle
						width: 300px
						&.color
							width: 132px
					button:not(#link-colors)
						display: inline-block
						width: 30px
						height: 30px
						background-color: hsl(0, 0%, 60%)
						border: none
						border-radius: 3px
						color: white
						cursor: pointer
						&:focus
							outline: 0
						.btn-text1
							transform: rotate(45deg)
						.btn-text2
							transform: rotate(45+90deg)
						.btn-text3
							transform: rotate(45+180deg)
						.btn-text4
							transform: rotate(45+270deg)
					#link-colors
						position: relative
						background: radial-gradient(center, #565656, #565656)
						color: hsl(0,0%,70%)
						border: none
						border-radius: 3px
						width: 20px
						padding: 2px
						vertical-align: middle
						cursor: pointer
						transition: background .5s ease, color .5s ease
						&.link-colors-on
							background: radial-gradient(center, #7fff90, #4b704f)
							color: hsl(0,0%,100%)
		// Copy button
		#copy-btn
			width: 113px
			margin: auto // why the fuck does this work
			button
				background-color: rgba(255,255,255,0.3)
				border: rgba(255,255,255,0.5) 1px solid
				border-radius: 30px
				padding: 10px 20px
				// margin: auto // but this shit doesn't
				margin-top: 10px
				cursor: pointer
				transition: background-color .5s ease
				&:hover
					background-color: rgba(255,255,255,0.6)
		// Example
		#examples
			width: 598px
			margin: auto
			h3
				text-align: center
				margin-top: 20px
				font-family: $font2
			.example
				font-size: 3em
				font-weight: bold
				text-align: center
				color: white
				transition: text-shadow .25s ease
		// Buttons
		#btn-container
			position: absolute
			bottom: 0
			width: 100%
			button
				background-color: rgba(255,255,255,0.3)
				border: rgba(255,255,255,0.5) 1px solid
				border-radius: 30px
				padding: 10px 20px
				margin: 10px
				cursor: pointer
				transition: background-color .5s ease
				&.show-code
					float: right
				&:hover
					background-color: rgba(255,255,255,0.6)
	// Slide out containers
	#learn-more-cont, #code-cont
		background: linear-gradient(90deg, #c4f2ff, #56ffcc)
		width: 100%
		height: 700px
		.fa-times
			color: white
			float: right
			padding: 12px
			cursor: pointer
	#learn-more-cont
		//border-top: rgba(200,200,200,0.4) 2px solid
		h3
			text-align: center
			background: rgba(255,255,255,0.3)
			padding: 15px
			border-top: rgba(255,255,255,0.5) 2px solid
			border-bottom: rgba(255,255,255,0.5) 2px solid
		p
			padding: 10px
			background: rgba(255,255,255,0.1)
	#code-cont
		//border-top: rgba(200,200,200,0.4) 2px solid
View Compiled
new Clipboard(".copy");
var xMod = "";
var yMod = "";

$(document).ready(function() {
	
	generateShadow(); // Generate init shadow
	
	// Link Colors Button
	$("#link-colors").click(function() {
		$(this).val() == "on" ? link_0() : link_1();
		$(this).toggleClass("link-colors-on");
		generateShadow();
	})
	function link_0() { // Link Button Off
		$("#link-colors").val("off");
	}
	function link_1() { // Link Button On
		$("#link-colors").val("on");
	}
	
	$("#angle1").click(function() {
		xMod = "";
		yMod = "";
		generateShadow();
	})
	$("#angle2").click(function() {
		xMod = "-";
		yMod = "";
		generateShadow();
	})
	$("#angle3").click(function() {
		xMod = "-";
		yMod = "-";
		generateShadow();
	})
	$("#angle4").click(function() {
		xMod = "";
		yMod = "-";
		generateShadow();
	})
	
	// Learn More Button -- Yeah, this probably isn't proper at all
	$(".learn-more").click(function() {
		// Slide Div
		$("#learn-more-cont").slideToggle("slow");
		
		// Animate the View to Div
		$('html, body').animate({
			scrollTop: $("#learn-more-cont").offset().top
		}, 1000);
	})
	
	// Show Code Button -- But it works
	$(".show-code").click(function() {
		// Slide Div
		$("#code-cont").slideToggle("slow");
		
		// Animate the View to Div
		$('html, body').animate({
			scrollTop: $("#code-cont").offset().top
		}, 1000);
	})
	
	// Close Buttons
	$("#close-learn-more").click(function() {$("#learn-more-cont").slideToggle("slow");})
	$("#close-code").click(function() {$("#code-cont").slideToggle("slow");})
	
	
	$("#length").change(function() {generateShadow();});
	$("#smooth").change(function() {generateShadow();});
	$("#color").change(function() {generateShadow();});
})

// Generate Text-Shadow CSS
function generateShadow() {
	var length = $("#length").val();
	var smooth = $("#smooth").val();
	var colora = $("#colora").val();
	var colorb = $("#colorb").val();
	var textShadowRaw = "";

//	console.log("Length: " + length);
//	console.log("Smooth: " + smooth);
//	console.log(" Color: " + color);

	var n = 0;
	var increments = 100/length;
	for (var n = 0; n < length; ++ n) {
		var current = n + 1;
		var curIncr = current * increments;
		
		// Yeeeeaaah.. that doesn't work for some reason
		if ($("#link-colors").val() == "on") {
			var colorMix = $.xcolor.gradientlevel(colora, colorb, curIncr, 100);
		}
		else {
			var colorMix = colora;
		}
		
//		console.log(colorMix);
		
		textShadowRaw += xMod + current + "px " + yMod + current + "px 0px " + colorMix + ", ";
	}
	
	
	var textShadow = textShadowRaw.slice(0,-2); // Remove the last comma
	
//	console.log(textShadow);
	
	$(".example").css({ // Write CSS attribute
		"text-shadow" : textShadow
	});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
  3. https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js
  4. https://cdn.rawgit.com/infusion/jQuery-xcolor/master/jquery.xcolor.js