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

              
                - 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

Console