How a basic `linear-gradient()` works (interactive)

HTML

              
                - var aint = 1; // selected angle interval
- var c = ['#ff9800', '#9c27b0'];
- var num = 35;
- var min = 180*(aint - 1);
- var max = 180*(aint + 1);
- var p = 360, ba = 360/p;
- var perc = 25;

body(data-aint=aint style=`--aint: ${aint}; --num: ${num}; --c0: ${c[0]}; --c1: ${c[1]}; --p: ${p}; --fan: ${+(!aint && num < 0)}; --fas: ${+(Math.abs(num) > 22.5)}; --perc: ${perc}`)
	form.dark
		div.toggle--int(role='group' aria-label='Choose what interval gradient angles should fit into')
			- for(var i = 0; i < 2; i++) {
				input(type='radio' name='aint' id=`aint${i}` checked= aint === i)
				label.lbl(for=`aint${i}` style=`--i: ${i}`) #{180*(i - 1)}° to #{180*(i + 1)}°
			- }
			div.toggle--int__vis(aria-hidden='true')

	section(role='graphics-document' aria-label='Interactive illustration that aims to help with understanding how simple (with only one stop at 0% and a second one at 100%) CSS linear gradients work.')
		.quads(role='group' aria-label='quadrant labels')
			- for(var i = 0; i < 4; i++) {
				- var σx = Math.pow(-1, ~~(i/2));
				- var σy = Math.pow(-1, 1 + (~~(i/2) + i%2)%2);
				.quad.lbl(style=`--σx: ${σx}; --σy: ${σy}`)
			- }
		.marks(role='graphics-object group' aria-label='Labelled angle markers distributed in a circle starting from the top (12 o\'clock).')
			- for(var i = 0; i < p; i++) {
				- var vis_a0 = i*ba;
				- var cond = i > .5*p;
				- var vis_a1 = i*ba - cond*360;
				- var act_a = (vis_a1 - 90)*Math.PI/180;
				- var tfx = +(Math.cos(act_a).toFixed(4));
				- var tfy = +(Math.sin(act_a).toFixed(4));
				- var end = (i === 0 && !aint) ? 0 : ((i === .5*p && aint) ? 1 : null)
				.mark(style=`--k: ${i}; --tfx: ${Math.abs(tfx)}; --σx: ${Math.sign(tfx)}; --tfy: ${Math.abs(tfy)}; --σy: ${Math.sign(tfy)}` data-ang=vis_a0)
					if cond
						span.mark__txt.lbl(style='--i: 0') #{vis_a1}°
					span.mark__txt.lbl(style=cond ? '--i: 1' : null data-end) #{vis_a0}°
			- }
		.grad(role='graphics-object group' aria-label='Gradient box with helper lines and annotations explaining how the linear gradient is drawn.')
			.grad__rect.grad__rect--actual(role='graphics-object' aria-label='Box #1. Actual box gradient is painted into.')
			.grad__rect.grad__rect--uncut.rot(role='graphics-object' aria-label='Box #2. Minimal box, rotated by the gradient angle, that fully contains box #1. Basically, what happens is: we create this box, rotate it by the gradient angle, size it such that it fully contains box #1 (the corners of box #1 are on the edges of box #2), we paint the gradient as a bottom to top (or 0°) linear one on box #2 and then clipthe rotated box #2 to box #1.')
			.grad__ang.arr(role='graphics-object' aria-label='Gradient angle measurement marker.')
			.grad__axes(role='graphics-object' aria-label='Horizontal and vertical axes. These axes pass through the midpoint (point where diagonals intersect) of box #1. The vertical one is the gradient start axis, the axis we start measuring our gradient angle from.')
			.grad__line.rot(role='graphics-object group' aria-label='The gradient line. This is rotated away from the gradient start axis by the gradient angle. Has an arrow at the top to point towards the current angle mark on the circle around.')
				.grad__line__arr.arr(role='graphics-object' aria-label='Gradient line pointer (arrow). Points towards the angle marker corresponding to the gradient angle (if the gradient angle is 30°, it points towards the 30° arrow marker.)')
				.grad__line__end(role='graphics-object' aria-label='Gradient start line. This is also the bottom edge of box #2 and also a line passing through a corner of box #1, perpendicular onto the gradient line at 0% of the gradient' style='--i: 0; --c: var(--c0)')
					.grad__line__end__txt.lbl.dark(aria-label='Label for the gradient start point.') 0%
				.grad__line__end(role='graphics-object' aria-label='Gradient end line. This is also the top edge of box #2 and also a line passing through a corner of box #1, perpendicular onto the gradient line at 100% of the gradient' style='--i: 1; --c: var(--c1)')
					.grad__line__end__txt.lbl.dark(aria-label='Label for the gradient start point.') 100%
				.grad__orig(role='graphics-object' aria-label='Gradient origin point. Found at the intersection of the diagonals of our boxes and also at the intersection of the vertical gradient start axis and the gradient line. The gradient start axis and the gradient line both pass through it as well.')
				input#perc(type='range' value=perc)
				output.lbl(for='perc') #{perc}

	pre.dark
		span.token--func linear-gradient
		span.token--punc (
		span.token--args
			span.token--dir.token--ang
				input#num.token--num.lbl(type='number' value=num min=min max=max style=`--num-w: ${num.toString().length}ch`)
				span.token--unit deg
			- for(var i = 0; i < 2; i++) {
				span.token--punc ,
				|  
				span.token--stop
					span.token--col
						input(type='color' id=`c${i}` value=c[i])
						output(for=`c${i}`) #{c[i]}
			- }
		span.token--punc )

CSS

              
                @import 'compass/css3';

$resp-data: (
	 2: 2000px, 
	 3: 1200px, 
	 5: 780px, 
	 6: 720px, 
	10: 640px, 
	15: 320px, 
	30: 240px, 
	45: 160px, 
);

$c-dark: #222;
$c-light: #e7e7e7;
$c-main: #d92727;
$c-sec: #ff8a8a;

$btn-b: .125em;
$btn-p: .125em;
$btn-d: 1em;
$btn-r: .25em;
$lbl-g: 1vmin;

$box-w: 43vmin;
$box-h: 23vmin;
$box-d: sqrt(pow($box-w, 2) + pow($box-h, 2));
$box-a: atan($box-w/$box-h);
$dot-d: .375em;
$arc-d: .75*$box-h;

$line-w: 2px;
$line-o: -.5*$line-w;
$circ-r: 37.5vmin;

$track-h: $dot-d;
$thumb-d: $track-h + 2*$btn-b;

$t: .3s;

@mixin thumb {
	box-sizing: content-box;
	border: solid $line-w $c-light;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	box-shadow: 0 0 $line-w $c-dark;
	background: var(--c)
}

@mixin cswatch() {
	border-radius: 50%;
	border: solid $line-w currentcolor;
}

/* ========== GENERIC STYLES ========== */
*, :before, :after {
	--j: calc(1 - var(--i));
	--σ: calc(1 - 2*var(--i));
	box-sizing: inherit;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit
}

input {
	&[type='radio'] {
		position: absolute;
		left: -100vw;
		
		+ label {
			white-space: nowrap;
			cursor: pointer;
		}
		
		&:checked + label {
			color: $c-sec
		}
		
		&:focus, &:hover {
			+ label {
				background: $c-main;
				color: $c-light
			}
			
			~ div { color: $c-main }
		}
	}
	
	&[type='range'] {
		&, &::-webkit-slider-thumb, 
		&::-webkit-slider-runnable-track {
			-webkit-appearance: none
		}
		
		width: var(--track-w); height: $track-h;
		cursor: pointer;
				
		&::-webkit-slider-thumb { @include thumb }
	
		&::-moz-range-thumb { @include thumb }
	}
	
	&[type='number'] {
		max-width: 4em;
		text-align: right;
		
		&::-webkit-inner-spin-button, 
		&::-webkit-inner-spin-button {
			-webkit-appearance: none
		}
		
		-moz-appearance: textfield;
	}
	
	&[type='color'] {
		display: inline-block;
		width: $btn-d; height: $btn-d;
		vertical-align: middle;
		cursor: pointer;
		
		&::-webkit-color-swatch-wrapper {
			padding: 0
		}
		
		&::-webkit-color-swatch {
			@include cswatch
		}
		
		&::-moz-color-swatch {
			@include cswatch
		}
		
		&:hover, &:focus {
			animation: pulse .2s ease-in-out 8 alternate
		}
	}
	
	&:focus { outline: solid 0 transparent }
}

@keyframes pulse { to { transform: scale(1.25) } }

.dark {
	background: $c-dark;
	color: $c-light;
	
	&:not(.lbl) {
		border: solid 0 $c-dark;
		border-width: 0 50vw;
		padding: 1vmin;
	}
}

.lbl {
	padding: 0 $btn-r;
	border-radius: $btn-r;
}

.arr {
	&:after {
		border: solid 0 transparent;
		border-width: $dot-d 2*$dot-d;
		border-left-color: currentcolor;
		content: ''
	}
}

/* ========== COMPONENT STYLES ========== */
body {
	--ang: calc(var(--num)*1deg);
	--slist: var(--c0), var(--c1);
	--box-a: #{$box-a};
	--grad-w: calc(#{$box-w}*var(--cos-g) + #{$box-h}*var(--sin-g));
	--grad-h: calc(#{$box-d}*var(--cos));
	--track-w: calc(var(--grad-h) + #{$thumb-d} + 2*#{$line-w});
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	min-height: 100vh;
	font: 1.375em/ 1.375 consolas, monaco, monospace;
	
	@media (max-width: 900px) { font-size: 1.25em }
	
	@media (max-width: 820px) { font-size: 1.125em }
	
	@media (max-width: 740px) { font-size: 1em }
	
	@media (max-width: 285px) { font-size: .875em }
	
	@media (max-width: 250px) { font-size: .75em }
	
	@media (max-width: 210px) { font-size: .625em }
	
	@media (max-width: 175px) { font-size: .5em }
}

form {
	width: 100%;
}

.toggle--int {
	$cell-w: $btn-d + $btn-b + $btn-p;
	display: grid;
	grid-template: 100% / 1fr repeat(2, $cell-w) 1fr;
	
	label {
		grid-row: 1;
		grid-column: calc(2*var(--i) + 1)/ span 2;
		position: relative;
		z-index: 1;
		margin: 0 calc(var(--j)*(#{$cell-w} + #{$lbl-g})) 
			0 calc(var(--i)*(#{$cell-w} + #{$lbl-g}));
		width: max-content;
		transition: $t;
		
		&:before {
			--cover-w: calc(#{$cell-w} + #{$lbl-g});
			position: absolute;
			left: calc(var(--j)*100% - var(--i)*var(--cover-w));
			width: var(--cover-w);
			height: 100%;
			content: ''
		}
		
		&:first-of-type { justify-self: end }
	}
	
	&__vis {
		grid-row: 1;
		grid-column: 2/ span 2;
		position: relative;
		z-index: 0;
		border: solid $btn-b $c-light;
		padding: $btn-p;
		width: 2*$btn-d; height: $btn-d;
		border-radius: $btn-d;
		color: $c-sec;
		transition: color $t;
		
		&:before {
			position: absolute;
			width: $btn-d; height: $btn-d;
			border-radius: 50%;
			transform: translate(calc(var(--aint)*100%));
			background: currentcolor;
			transition: transform $t;
			content: ''
		}
	}
}

section {
	flex: 1;
	overflow: hidden;
	position: relative;
	width: 100%;
	background: $c-light;
	
	*, :before, :after {
		position: absolute;
		top: 50%; left: 50%;
		--pos: translate(var(--ox, -50%), var(--oy, -50%));
		transform: var(--pos);
	}
}

.quads {
	width: 100%; height: 100%;
}

.quad {
	top: calc(50%*(1 + var(--σy)));
	left: calc(50%*(1 + var(--σx)));
	--ox: calc(-50% - var(--σx)*50%);
	--oy: calc(-50% - var(--σy)*50%);
	counter-increment: q;
	
	&:before {
		position: static;
		content: 'Q' counter(q, upper-roman)
	}
}

.mark {
	--vis: 0;
	--ca: calc(var(--k)*1turn/var(--p) - 90deg);
	transform: rotate(var(--ca)) 
		translate($circ-r);
	cursor: pointer;
	
	&:before, &:after {
		border: solid $btn-b transparent;
		padding: $btn-p;
		width: $dot-d; height: $dot-d;
		border-radius: 50%;
		background: currentcolor content-box;
		content: ''
	}
	
	&:after {
		border-color: currentcolor;
		transform: var(--pos)
			scale(calc((var(--vis) + 1)*.5));
		opacity: var(--vis);
		color: $c-main;
		transition: $t;
	}
	
	&__txt {
		$off0: $btn-b + $btn-p + $dot-d;
		$off1: $dot-d;
		padding: 0 $btn-r;
		border-radius: $btn-r;
		transform: var(--pos) 
			rotate(calc(-1*var(--ca))) 
			translate(calc(var(--σx)*(var(--tfx)*(50% + #{$off0} + var(--tfy)*#{$off1}))), 
								calc(var(--σy)*(var(--tfy)*(50% + #{$off0} + var(--tfx)*#{$off1}))));
		opacity: var(--vis);
		background: $c-main padding-box;
		color: $c-light;
		transition: $t;
		pointer-events: none;
		
		&:before, &:after { position: static }
		
		[data-ang='0'] > &:after { content: '≡360°' }
		[data-ang='180'] > &:before { content: '-180°≡' }
		
		body[data-aint='1'] &:not(:only-child):first-child, 
		body[data-aint='0'] &:not(:only-child):last-child, 
		body[data-aint='1'] [data-ang='180'] > &:before, 
		body[data-aint='0'] [data-ang='0'] > &:after  {
			display: none
		}
	}
	
	&.sel, &:hover { --vis: 1 }
	
	&:hover { z-index: 2 }
	
	&:hover &__txt { box-shadow: 0 0 $line-w $c-dark }
	
	$prev: null;

	@each $key, $val in $resp-data {
		@media (max-width: $val), (max-height: $val) {
			@if $prev != null {
				&:not(:nth-child(#{$prev}n + 1)) { display: block }
			}

			&:not(:nth-child(#{$key}n + 1)) { display: none }

			.pvis { r: calc(#{.0005*$key}*var(--dim)) }
		}

		$prev: $key;
	}
}

.rot {
	transform: var(--pos) rotate(var(--ang));
}

.grad {
	&__rect {		
		&--actual {
			width: $box-w; height: $box-h;
			background: Linear-Gradient(var(--ang), var(--slist));
		}
		
		&--uncut {
			width: var(--grad-w); height: var(--grad-h);
			opacity: .05;
			background: Linear-Gradient(0deg, var(--slist));
			pointer-events: none;
			
			.show-uncut + & { opacity: .65 }
		}
		
		&:before {
			border: dashed $line-w $c-light;
			width: calc(100% - #{$line-w});
			height: calc(100% - #{$line-w});
			content: ''
		}
	}
	
	&__ang {
		display: none;
		
		@supports (background: conic-gradient(tan, red)) {
			display: block;
			color: $c-light;
			mix-blend-mode: difference;
			pointer-events: none;
			
			&:before {
				width: $arc-d; height: $arc-d;
				border-radius: 50%;
				background: conic-gradient(from calc(var(--fan)*var(--ang)), 
					currentcolor calc((1 - 2*var(--fan))*var(--ang)), transparent 0%);
				--mask: Radial-Gradient(closest-side, 
										#{rgba(red, .3)} calc(100% - #{$line-w} - 1px), 
										red calc(100% - #{$line-w}));
				-webkit-mask: var(--mask);
				content: ''
			}
			
			&:after {
				transform: var(--pos) 
					rotate(var(--ang)) scalex(calc(var(--fas)*(1 - 2*var(--fan)))) 
					translate(-.35*$track-h, calc(.5*(#{$line-w} - #{$arc-d})));
			}
		}
	}
	
	&__axes {
		pointer-events: none;
		
		&:before, &:after {
			width: $line-w; height: 2*$circ-r;
			transform: var(--pos) rotate(calc(var(--i, 0)*90deg)) scale(.9875);
			background: linear-gradient(transparent 50%, mix($c-dark, $c-light) 0) 0 -.25em/ 100% 1em round;
			content: ''
		}
		
		&:after { --i: 1 }
	}
	
	&__orig {
		width: $dot-d; height: $dot-d;
		border-radius: 50%;
		background: $c-dark;
	}

	&__line {
		height: var(--grad-h);
		
		&:before {
			height: var(--track-w); width: $track-h;
			border-radius: $track-h;
			box-shadow: 0 0 $line-w $c-light, 
				inset 0 0 0 $line-w $c-dark;
			background: Linear-Gradient(0deg, var(--slist));
			content: ''
		}
		
		&__arr {
			top: auto; bottom: 100%;
			width: $line-w; 
			height: calc(#{$circ-r} - .5*var(--grad-h) - #{2*$dot-d});
			--oy: 0;
			background: $c-dark;
			pointer-events: none;
		
			&:after {
				top: 0;
				--oy: -50%;
				transform: var(--pos) rotate(-90deg) translate($btn-b)
			}
		}
		
		&__end {
			top: calc(var(--j)*100%);
			height: $line-w; width: calc(#{$box-d}*var(--sin));
			background: Linear-gradient(calc(var(--σ)*var(--sgn-d)*var(--σx)*var(--σy)*90deg), 
				transparent 50%, rgba($c-dark, calc(var(--σx)*var(--σx)*var(--σy)*var(--σy))) 0);
			
			&__txt {
				transform: var(--pos) 
					rotate(calc(-1*var(--ang))) 
					translate(calc(var(--σ)*var(--σx)*var(--sin-g)*(-50% - (1 + var(--cos-g))*#{.5*$btn-d})), 
										calc(var(--σ)*var(--σy)*var(--cos-g)*(-50% - (1 + var(--sin-g))*#{.5*$btn-d})));
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Safari */
				 -khtml-user-select: none; /* Konqueror HTML */
				   -moz-user-select: none; /* Firefox */
				        user-select: none; /* Chrome and Opera */
			}
			
			&:before, &:after {
				border: solid $btn-b $c-dark;
				width: $dot-d; height: $dot-d;
				border-radius: 50%;
				background: var(--c);
				content: ''
			}
			
			&:before {
				--ox: calc(-50% + var(--σ)*var(--sgn-d)*var(--σx)*var(--σy)*.5*#{$box-d}*var(--sin));
				transform: var(--pos) scale(.75);
			}
		}
		
		[id='perc'] {
			transform: var(--pos) rotate(-90deg);
			
			~ output {
				--vis: 0;
				top: 100%;
				--ox: #{$dot-d + 2*$btn-b};
				--oy: calc(-.01*var(--perc)*var(--grad-h) - 50%);
				transform: var(--pos) 
					rotate(calc(-1*var(--ang))) scale(var(--vis));
				opacity: var(--vis);
				background: $c-main;
				color: $c-light;
				transition: opacity $t;
				
				&:after {
					position: static;
					content: '%'
				}
			}
			
			&:focus, &:hover {
				~ output { --vis: 1 }
			}
		}
	}
}

pre {
	white-space: nowrap
}

.token {
	&--func { color: #9ab9ff }
	
	&--args {
		@media (max-width: 360px) {			
			> span:not(.token--punc):before {
				white-space: pre;
				content: '\A  '
			}
			
			~ :last-child:before {
				white-space: pre;
				content: '\A'
			}
		}
	}
	
	&--num {
		color: $c-sec;
			
		&[type='number'] {
			display: inline-block;
			margin-left: -.5em;
			width: var(--num-w, 2em);
			
			&:focus, &:hover {
				background: $c-main;
				color: $c-light;
			}
		}
	}
	
	&--unit { color: #fffb4a }
	
	&--stop {
		@media (max-width: 655px) {
			&:before {
				white-space: pre;
				content: '\A                '
			}
		}
	}
	
	&--col output { color: #c2ff96 }
}

JS

              
                const NAMED = {
				'aliceblue': '#f0f8ff',
				'antiquewhite': '#faebd7',
				'aqua': '#00ffff',
				'aquamarine': '#7fffd4',
				'azure': '#f0ffff',
				'beige': '#f5f5dc',
				'bisque': '#ffe4c4',
				'black': '#000000',
				'blanchedalmond': '#ffebcd',
				'blue': '#0000ff',
				'blueviolet': '#8a2be2',
				'brown': '#a52a2a',
				'burlywood': '#deb887',
				'cadetblue': '#5f9ea0',
				'chartreuse': '#7fff00',
				'chocolate': '#d2691e',
				'coral': '#ff7f50',
				'cornflowerblue': '#6495ed',
				'cornsilk': '#fff8dc',
				'crimson': '#dc143c',
				'cyan': '#00ffff',
				'darkblue': '#00008b',
				'darkcyan': '#008b8b',
				'darkgoldenrod': '#b8860b',
				'darkgray': '#a9a9a9',
				'darkgreen': '#006400',
				'darkgrey': '#a9a9a9',
				'darkkhaki': '#bdb76b',
				'darkmagenta': '#8b008b',
				'darkolivegreen': '#556b2f',
				'darkorange': '#ff8c00',
				'darkorchid': '#9932cc',
				'darkred': '#8b0000',
				'darksalmon': '#e9967a',
				'darkseagreen': '#8fbc8f',
				'darkslateblue': '#483d8b',
				'darkslategray': '#2f4f4f',
				'darkslategrey': '#2f4f4f',
				'darkturquoise': '#00ced1',
				'darkviolet': '#9400d3',
				'deeppink': '#ff1493',
				'deepskyblue': '#00bfff',
				'dimgray': '#696969',
				'dimgrey': '#696969',
				'dodgerblue': '#1e90ff',
				'firebrick': '#b22222',
				'floralwhite': '#fffaf0',
				'forestgreen': '#228b22',
				'fuchsia': '#ff00ff',
				'gainsboro': '#dcdcdc',
				'ghostwhite': '#f8f8ff',
				'goldenrod': '#daa520',
				'gold': '#ffd700',
				'gray': '#808080',
				'green': '#008000',
				'greenyellow': '#adff2f',
				'grey': '#808080',
				'honeydew': '#f0fff0',
				'hotpink': '#ff69b4',
				'indianred': '#cd5c5c',
				'indigo': '#4b0082',
				'ivory': '#fffff0',
				'khaki': '#f0e68c',
				'lavenderblush': '#fff0f5',
				'lavender': '#e6e6fa',
				'lawngreen': '#7cfc00',
				'lemonchiffon': '#fffacd',
				'lightblue': '#add8e6',
				'lightcoral': '#f08080',
				'lightcyan': '#e0ffff',
				'lightgoldenrodyellow': '#fafad2',
				'lightgray': '#d3d3d3',
				'lightgreen': '#90ee90',
				'lightgrey': '#d3d3d3',
				'lightpink': '#ffb6c1',
				'lightsalmon': '#ffa07a',
				'lightseagreen': '#20b2aa',
				'lightskyblue': '#87cefa',
				'lightslategray': '#778899',
				'lightslategrey': '#778899',
				'lightsteelblue': '#b0c4de',
				'lightyellow': '#ffffe0',
				'lime': '#00ff00',
				'limegreen': '#32cd32',
				'linen': '#faf0e6',
				'magenta': '#ff00ff',
				'maroon': '#800000',
				'mediumaquamarine': '#66cdaa',
				'mediumblue': '#0000cd',
				'mediumorchid': '#ba55d3',
				'mediumpurple': '#9370db',
				'mediumseagreen': '#3cb371',
				'mediumslateblue': '#7b68ee',
				'mediumspringgreen': '#00fa9a',
				'mediumturquoise': '#48d1cc',
				'mediumvioletred': '#c71585',
				'midnightblue': '#191970',
				'mintcream': '#f5fffa',
				'mistyrose': '#ffe4e1',
				'moccasin': '#ffe4b5',
				'navajowhite': '#ffdead',
				'navy': '#000080',
				'oldlace': '#fdf5e6',
				'olive': '#808000',
				'olivedrab': '#6b8e23',
				'orange': '#ffa500',
				'orangered': '#ff4500',
				'orchid': '#da70d6',
				'palegoldenrod': '#eee8aa',
				'palegreen': '#98fb98',
				'paleturquoise': '#afeeee',
				'palevioletred': '#db7093',
				'papayawhip': '#ffefd5',
				'peachpuff': '#ffdab9',
				'peru': '#cd853f',
				'pink': '#ffc0cb',
				'plum': '#dda0dd',
				'powderblue': '#b0e0e6',
				'purple': '#800080',
				'rebeccapurple': '#663399',
				'red': '#ff0000',
				'rosybrown': '#bc8f8f',
				'royalblue': '#4169e1',
				'saddlebrown': '#8b4513',
				'salmon': '#fa8072',
				'sandybrown': '#f4a460',
				'seagreen': '#2e8b57',
				'seashell': '#fff5ee',
				'sienna': '#a0522d',
				'silver': '#c0c0c0',
				'skyblue': '#87ceeb',
				'slateblue': '#6a5acd',
				'slategray': '#708090',
				'slategrey': '#708090',
				'snow': '#fffafa',
				'springgreen': '#00ff7f',
				'steelblue': '#4682b4',
				'tan': '#d2b48c',
				'teal': '#008080',
				'thistle': '#d8bfd8',
				'tomato': '#ff6347',
				'turquoise': '#40e0d0',
				'violet': '#ee82ee',
				'wheat': '#f5deb3',
				'white': '#ffffff',
				'whitesmoke': '#f5f5f5',
				'yellow': '#ffff00',
				'yellowgreen': '#9acd32'
			},
			_BODY = document.body, 
			_GL = document.querySelector('.grad__line'), 
			/* range input (percentage on gradient) */
			_PRC = document.getElementById('perc'), 
			_OUT = document.querySelector('[for=perc]'), 
			/* numeric input (gradient angle) */
			_NUM = document.getElementById('num'), 
			/* box anfle = acute angle between 
			 * the vertical and a gradient box diagonal*/
			BA = getComputedStyle(_BODY).getPropertyValue('--box-a'), 
			/* only space (or empty) string RegExp */
			EMPTY = /^\s*$/, 
			PREC = +_BODY.style.getPropertyValue('--p'), 
			TFN = {
				'linear': function(k) {
					return k;
				}, 
				'ease-in': function(k) {
					return Math.pow(k, 1.675);
				}, 
				'ease-out': function(k) {
					return 1 - Math.pow(1 - k, 1.675);
				}, 
				'ease-in-out': function(k) {
					return .5*(Math.sin((k - .5)*Math.PI) + 1);
				}
			};

let /* interval flag, 
		 * 0 for -180° to 180°, 1 for 0° to 360° */
		aint = +_BODY.dataset.aint, 
		
		/* number input value, min & max */
		num = +_NUM.value, min = +_NUM.min, max = +_NUM.max, 
		γ /* gradient angle in radians, in the -180° to 180° interval */, 
		
		/* angular offset flag, 
		 * 0 if absolute value, reduced to the -180° to 180° interval, 
		 * is under 90°, 1 if it's over 90° */
		o, 
		σx /* quadrant sign along x axis */, 
		σy /* quadrant sign along y axis */, 
		
		fan /* negative angle flag */, 
		fas /* small angle flag */, 
		
		/* difference between box angle and 
		 * gradient angle reduced to 90° */
		δ, 
		
		/* initial value at animation start
		 * here, a number value of angle (in degrees) */
		ini, 
		/* difference between 
		 * final value at animation end and 
		 * initial value at animation start */
		dif, 
		/* animation precision, dif in absolute value */
		p, 
		
		rID = null /* request ID for rAF */, 
		
		/* percentage on grad highlighted point is at */
		perc = +_PRC.value, 
		
		_sel = document.querySelector(`[data-ang='${(num + 360)%360}']`);

function limitNum() {
	if(num < min) num = num%360 + 360;
	if(num > max) num = num%360 - (1 - aint)*360;
	
	_NUM.value = num;
	_NUM.style.setProperty('--num-w', `${num.toString().length}ch`);
};

function setDegAngle(val = num) {
	γ = (val - aint*(val > 180)*360)*Math.PI/180;
	o = +(Math.abs(γ) > .5*Math.PI);
	
	/* make sure signs are 0 on the axes */
	σx = (Math.abs(val) !== 180)*Math.sign(γ);
	σy = (Math.abs(γ) !== .5*Math.PI)*-Math.pow(-1, o);
	
	fan = +(!aint && val < 0);
	fas = +(Math.abs(val) > 22.5);
	
	γ = Math.sign(γ)*(o*Math.PI + Math.pow(-1, o)*Math.abs(γ));
	δ = BA - Math.abs(γ);
	
	_BODY.style.setProperty('--num', +val.toFixed(2));
	_BODY.style.setProperty('--sin', +Math.sin(Math.abs(δ)).toFixed(5));
	_BODY.style.setProperty('--cos', +Math.cos(δ).toFixed(5));
	_BODY.style.setProperty('--sin-g', +Math.sin(Math.abs(γ)).toFixed(5));
	_BODY.style.setProperty('--cos-g', +Math.abs(Math.cos(γ)).toFixed(5));
	_BODY.style.setProperty('--sgn-d', Math.sign(δ));
	_BODY.style.setProperty('--σx', σx);
	_BODY.style.setProperty('--σy', σy);
	_BODY.style.setProperty('--fan', fan);
	_BODY.style.setProperty('--fas', fas);
};

function aniDegAngle(i = 1) {
	setDegAngle(ini + TFN['ease-out'](i/p, 2)*dif);
	
	if(i === p) {
		cancelAnimationFrame(rID);
		rID = null;
		return
	}
	
	rID = requestAnimationFrame(aniDegAngle.bind(this, ++i));
};

function setTargetVal(val) {
	if(rID) {
		cancelAnimationFrame(rID);
		rID = null
	}
	
	if(_sel) {
		_sel.classList.remove('sel');
		_sel = document.querySelector(`[data-ang='${(val + 360)%360}']`);
		_sel.classList.add('sel')
	}

	ini = +_BODY.style.getPropertyValue('--num');
	num = val;
	limitNum();
	dif = num - ini;
	p = Math.ceil(.25*Math.abs(dif)) || 1;
	aniDegAngle()
};

function setGradPerc() {
	_OUT.value = perc;
	_BODY.style.setProperty('--perc', perc);
};

function toRGBarr(hex) {
	if(!hex.match(/\#/g)) hex = NAMED[hex];
	
	return hex.match(/\w{2}/g).map(ch => parseInt(ch, 16))
};

function setIntPoint() {
	let c0 = toRGBarr(_BODY.style.getPropertyValue('--c0')),
			c1 = toRGBarr(_BODY.style.getPropertyValue('--c1')), 
			dp = .01*perc, 
			cp = 1 - dp;
	
	_BODY.style.setProperty('--c', `rgb(${c0.map((a, i) => cp*a + dp*c1[i])})`)
};

limitNum();
setDegAngle();
setIntPoint();
_sel.classList.add('sel')

addEventListener('input', e => {
	let _tg = e.target;
	
	if(_tg.type === 'radio') {
		_BODY.style.setProperty('--aint', aint = _BODY.dataset.aint = +_tg.id.replace(_tg.name, ''));
		_NUM.min = min = 180*(aint - 1);
		_NUM.max = max = 180*(aint + 1);
		
		if(rID) setTargetVal(+_NUM.value)
		else {
			limitNum();
			setDegAngle()
		}
		
		return;
	}
	
	if(_tg.type === 'range') {
		perc = +_PRC.value;
		setGradPerc();
		setIntPoint();
		
		return
	}
	
	if(_tg.type === 'number') {
		if(!isNaN(_tg.value) && !_tg.value.match(EMPTY)) {
			setTargetVal(+_tg.value)
		}
		
		return;
	}
	
	if(_tg.type === 'color') {
		let val = _tg.value, 
				named_val = Object.keys(NAMED).find(key => NAMED[key] === val);
		
		if(named_val) val = named_val;
		
		_BODY.style.setProperty(`--${_tg.id}`, _tg.nextElementSibling.textContent = val);
		setIntPoint();
	}
}, false);

_NUM.addEventListener('blur', e => {
	if(isNaN(_NUM.value) || _NUM.value.match(EMPTY)) _NUM.value = num
}, false);

addEventListener('click', e => {
	let _tg = e.target;
	
	if(_tg.classList.contains('mark'))
		setTargetVal(+_tg.style.getPropertyValue('--k')*360/PREC)
}, false);

addEventListener('dblclick', e => {
	let _tg = e.target;
	
	if(_tg.classList.contains('grad__rect'))
		_tg.classList.toggle('show-uncut')
}, false)

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions