Online HTML Obfuscator for Heavy Obfuscation

This is a free online tool that allows you to obfuscate HTML code.

How to use Online HTML Obfuscator:

Enter your HTML code in the input box below.
Click Obfuscate. Online HTML Obfuscator will convert the HTML code to obfuscated JavaScript code.

INPUT (HTML)

<!doctype html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<title>HTML Obfuscator : Sample Page</title>

<style>
*,
*::before,
*::after{
	box-sizing:border-box;
}
body{
	position:relative;
	margin:0;
	padding:0;
	width:100vw;
	height:100vh;
	background:linear-gradient(
		to bottom,#fec 0%,#fff 100%);
	overflow:hidden;
}
.info{
	position:relative;
	margin:30px;
	padding:30px;
	font-family:"Times New Roman";
	color:orange;
	border:1px solid orange;
	background:rgba(255,255,255,0.8);
	z-index:100;
}
.info a{
	color:orange;
	font-weight:bold;
}
.info a:hover{
	color:#c18b28;
}
.info .title{
	margin-bottom:15px;
	font-size:36px;
}
.info .desc{
	font-size:24px;
}
</style>

<script>
"use strict";
(function(){
	function $ce(tagName){
		return document.createElement(tagName);
	};

	function getRandomInt(min,max){
		return Math.floor(Math.random()*(max-min+1))+min;
	};

	function appendStyle(style){
		const el=$ce("style");
		el.type="text/css";
		if(el.styleSheet){
			el.styleSheet.cssText=style;
		}else{
			el.appendChild(document.createTextNode(style));
		}
		document.getElementsByTagName("head")[0].appendChild(el);
		return el;
	};

	function onEnd(el,callback,ename){
		const func=function(e){
			if(el==e.srcElement){
				el.removeEventListener(ename,func);
				if(callback){callback(e);}
			}
		};
		el.addEventListener(ename,func);
	};

	function onAnimationEnd(el,callback){
		onEnd(el,callback,"animationend");
	};

	function insertEmoji(px){
		const yy=0;
		const style=`
#${px.id}.ctower{
	position:absolute;
	left:0;
	top:0;
	width:${px.size}em;
	height:100%;
}
#${px.id}.ctower .cbox{
	position:relative;
	width:100%;
	height:${px.size}em;
	display:flex;
	justify-content:center;
	align-items:center;
	transform:translateY(-100%);
}
#${px.id}.ctower .char{
	display:inline-block;
	font-size:${px.size}em;
	line-height:1.1;
}
#${px.id}.ctower{
	animation-name:kf-ctower-${px.id};
	animation-fill-mode:forwards;
	animation-duration:${px.dura}s;
	animation-timing-function:linear;
}
@keyframes kf-ctower-${px.id}{
	0%{
		left:0%;
		transform:translate(-${100+px.wk}%);
	}
	100%{
		left:100%;
		transform:translate(${px.wk}%);
	}
}
#${px.id}.ctower .cbox{
	animation-name:kf-cbox-${px.id};
	animation-fill-mode:forwards;
	animation-duration:${px.dura}s;
}
@keyframes kf-cbox-${px.id}{
	0%{
		top:${100-20*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	15%{
		top:${100-0*px.hk-yy}%;
		animation-timing-function:ease-out;
	}
	30%{
		top:${100-15*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	45%{
		top:${100-0*px.hk-yy}%;
		animation-timing-function:ease-out;
	}
	60%{
		top:${100-10*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	75%{
		top:${100-0*px.hk-yy}%;
		animation-timing-function:ease-out;
	}
	90%{
		top:${100-7*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	100%{
		top:${100-0*px.hk-yy}%;
	}
}
#${px.id}.ctower .char{
	animation-name:kf-char-${px.id};
	animation-fill-mode:forwards;
	animation-duration:${px.spin}s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes kf-char-${px.id}{
	0%{
		transform:rotateZ(0);
	}
	100%{
		transform:rotateZ(360deg);
	}
}
`;
		const el_style=appendStyle(style);

		const el_char=$ce("div");
		el_char.className="char";
		el_char.innerHTML=px.char;

		const el_cbox=$ce("div");
		el_cbox.className="cbox";
		el_cbox.appendChild(el_char);

		const el_ctower=$ce("div");
		el_ctower.id=px.id;
		el_ctower.className="ctower";
		el_ctower.appendChild(el_cbox);

		onAnimationEnd(el_ctower,function(){
			el_ctower.remove();
			el_style.remove();
		});

		document.body.appendChild(el_ctower);
	};

	const emojix=[
		"😀","😃","😄","😁","😆","😅","😂","🤣","😊","😇",
		"🙂","🙃","😉","😌","😍","😘","😗","😙","😚","😋",
		"😛","😝","😜","🤪","🤨","🧐","🤓","😎","🤩","😏",
		"😒","😞","😔","😟","😕","🙁","😣","😖","😫","😩",
		"😢","😭","😤","😠","😡","🤬","🤯","😳","😱","😨",
		"😰","😥","😓","🤗","🤔","😑","😬","🙄","😲","😴",
		"🤤","😪","😵","😵‍","🤐","🤢","😷","🤒","🤕","🤑",
		"🤠","😈"];

	let idx=0;
	const timer_id=setInterval(function(){
		if(document.querySelectorAll(".ctower").length<10){
			idx++;
			const id="id"+(10000+idx);
			const px={
				id,
				char:emojix[getRandomInt(0,emojix.length-1)],
				size:getRandomInt(4,10),
				dura:getRandomInt(4,8),
				spin:getRandomInt(0.8,5),
				wk:getRandomInt(20,100),
				hk:getRandomInt(2,5)
			};
			insertEmoji(px);
		}
	},1000);
})();
</script>

</head>

<body>

<!-- [BEGIN] info -->
<div class="info">
	<div class="title">Bouncing Emoji</div>
	<div class="desc">This is a sample HTML page for
		<a href="http://www.phpkobo.com/html-obfuscator" target="_blank">HTML Obfuscator</a>
	</div>
</div>
<!-- [END] info -->

</body>

</html>

Obfuscation Options

Remove all the script blocks (<script>...</script>) from the Elements tab of DevTools

Remove all the comment blocks () from the Elements tab of DevTools

OUTPUT (JavaScript)

Installation

Just copy and paste the output JavaScript code in your web page. The code already includes <script> and </script> for your convenience, so there is no need to enclose it in another <script> tag.

Heavily Obfuscate HTML Code

Online HTML Obfuscator