Obfuscate CSS Code & Stylesheet

Online CSS Obfuscator

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

How to use Online CSS Obfuscator:

  1. Enter your CSS code in the input box below.
  2. Click Obfuscate. Online CSS Obfuscator will convert the CSS code to obfuscated JavaScript code.
INPUT (CSS)
OUTPUT (JavaScript)
Installation
To install the output JavaScript code in your web page, use one of these two methods :
<script>...</script>
<script src="/path/to/JavaScript/file"></script>
Do not use :
<style>...</style>
<link href="..." rel="stylesheet" />
Maintain Relative Paths

If your CSS contains relative paths (as shown in the examples below), the output JavaScript code will also include the same relative paths.

Relative Path Examples
@font-face {
   font-family: "MyFont";
   src: url("fonts/my-font.ttf");
}
.my-div {
   width: 300px;
   height: 200px;
   background: url("../img/bg.png");
}
body {
   background-image: url('bg/body.jpg');
   background-size: 200vh;
   background-repeat: repeat-y;
}
@import url("./my-style.css");
#my-square {
   width: 50%;
   background-color: rgb(23,129,202);
   border-image: url('images/star.png');
}
1/5

Make sure you place the JavaScript file on your website in such a way that the relative paths are maintained. If you break relative paths, you may encounter missing images, fonts, and other web resources defined in your CSS file.

The easiest way to decide where to put the output JavaScript file is to place it in the same folder as your input CSS file is located.

For example, if the path of the CSS file is mysite/css/style.css, then place the output JavaScript file in mysite/css/. Putting it in the same folder guarantees that all the relative paths in your CSS file are maintained.