Utilities
CSS Minifier
Online CSS Minifier Tool and Compressor, with Fast and Simple API Access
Input CSS


/* Please ❤ this if you like it! */


/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');*/

*,
*::before,
*::after {
	box-sizing: border-box;
}
::selection {
	color: var(--yellow);
	background-color: var(--blue);
}
::-moz-selection {
	color: var(--yellow);
	background-color: var(--blue);
}


/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%; 
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	z-index: 4;
}
.cursor{
	background-color: var(--blue);
	height: 0;
	width: 0;
}
.cursor2,.cursor3{
	height: 50px;
	width: 50px;
	transition: all 200ms ease-out;
	background-position: center;
	background-size: 0 0;
}
.cursor2.hover,
.cursor3.hover{
	height: 220px;
	width: 320px;
	border:none;
	border-radius: 8px;
}
.cursor2{
	border: 2px solid var(--blue);
	box-shadow: 0 0 12px rgba(16, 39, 112, 0.2);
}
.cursor2.hover{
	background-size: cover;
	box-shadow: 0 0 0 rgba(16, 39, 112, 0.2);
}
body.img-1-wrap .cursor2,.cursor3{
	background-image: url('../images/long-arrow-left.svg');
	background-size: 80%;
	background-repeat: no-repeat;
}
body.img-2-wrap .cursor2,.cursor3{
	background-image: url('../images/long-arrow-left.svg');
	background-size: 80%;
	background-repeat: no-repeat;
}
body.img-3-wrap .cursor2,.cursor3{
	background-repeat: no-repeat;
	background-image: url('../images/long-arrow-right.svg');
	background-size: 80%;
}
body.img-4-wrap .cursor2,.cursor3{
	background-repeat: no-repeat;
	background-image: url('../images/long-arrow-right.svg');
	background-size: 80%;
}
body.img-5-wrap .cursor2{
	width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgb(0,174,239);
    background: linear-gradient(133deg, rgba(0,174,239,1) 20%, rgba(0,168,134,1) 79%);
}
body.img-6-wrap .cursor2{}
body.img-7-wrap .cursor2{}
body.img-8-wrap .cursor2{}
body.img-9-wrap .cursor2{}
body.img-10-wrap .cursor2{}
body.img-11-wrap .cursor2{}
body.img-12-wrap .cursor2{}
body.img-13-wrap .cursor2{
    /*width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgb(0,174,239);
    background: linear-gradient(133deg, rgba(0,174,239,1) 20%, rgba(0,168,134,1) 79%);*/
}

body.img-5-wrap .cursor2::after{
	content: "VIEW PROFILE";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	text-align: center;
	line-height: 1;
	font-family: 'din_next_lt_arabicbold';
	color: var(--white);
}
body.img-14-wrap .cursor2{
	width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgb(0,174,239);
    background: linear-gradient(133deg, rgba(0,174,239,1) 20%, rgba(0,168,134,1) 79%);
}
body.img-14-wrap .cursor2::after{
	content: "VIEW PROFILE";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 25px;
	text-align: center;
	line-height: 1;
	font-family: 'din_next_lt_arabicbold';
	color: var(--white);
}


body.img-6-wrap .cursor2::after{}
body.img-7-wrap .cursor2::after{}
body.img-8-wrap .cursor2::after{}
body.img-9-wrap .cursor2::after{}
body.img-10-wrap .cursor2::after{}
body.img-11-wrap .cursor2::after{}
body.img-12-wrap .cursor2::after{}
body.img-13-wrap .cursor2::after{

}
body.logo-wrap .cursor2,.cursor3{
	background-image: none;
	height: 36px;
	width: 36px;
}
body.logo-wrap .cursor2.hover,
body.logo-wrap .cursor3.hover{
	height: 36px;
	width: 36px;
	transform: scale(2) translateX(-25%) translateY(-25%);
	border-radius: 50%;
	background-color: var(--yellow);
}


.hover-target{
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition: color 250ms ease;
}
.hover-target:before{
	position: absolute;
	content: '';
	height: 0;
	border-radius: 1px;
	bottom: 0;
	left: -10px;
	width: calc(100% + 20px);
	border-radius: 2px;
	display: block;
	background-color: var(--white);
	transition: height 250ms ease;
	mix-blend-mode: difference;
	opacity: 0.6;
	display: none;
}
.hover-target:hover:before{
	height: 100%;
}
.hover-target:hover{
	z-index: 5;
	color: var(--yellow);
}

Minified CSS Output
*,::after,::before{box-sizing:border-box}::selection{color:var(--yellow);background-color:var(--blue)}::-moz-selection{color:var(--yellow);background-color:var(--blue)}.cursor,.cursor2,.cursor3{position:fixed;border-radius:50%;transform:translateX(-50%) translateY(-50%);pointer-events:none;left:-100px;top:50%;z-index:4}.cursor{background-color:var(--blue);height:0;width:0}.cursor2,.cursor3{height:50px;width:50px;transition:.2s ease-out;background-position:center;background-size:0 0}.cursor2.hover,.cursor3.hover{height:220px;width:320px;border:none;border-radius:8px}.cursor2{border:2px solid var(--blue);box-shadow:0 0 12px rgba(16,39,112,.2)}.cursor2.hover{background-size:cover;box-shadow:0 0 0 rgba(16,39,112,.2)}.cursor3,body.img-1-wrap .cursor2,body.img-2-wrap .cursor2{background-image:url('../images/long-arrow-left.svg');background-size:80%;background-repeat:no-repeat}.cursor3,body.img-3-wrap .cursor2,body.img-4-wrap .cursor2{background-repeat:no-repeat;background-image:url('../images/long-arrow-right.svg');background-size:80%}body.img-14-wrap .cursor2,body.img-5-wrap .cursor2{width:170px;height:170px;border-radius:50%;background:#00aeef;background:linear-gradient(133deg,#00aeef 20%,#00a886 79%)}body.img-14-wrap .cursor2::after,body.img-5-wrap .cursor2::after{content:"VIEW PROFILE";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:25px;text-align:center;line-height:1;font-family:din_next_lt_arabicbold;color:var(--white)}.cursor3,body.logo-wrap .cursor2{background-image:none;height:36px;width:36px}body.logo-wrap .cursor2.hover,body.logo-wrap .cursor3.hover{height:36px;width:36px;transform:scale(2) translateX(-25%) translateY(-25%);border-radius:50%;background-color:var(--yellow)}.hover-target{position:relative;display:inline-block;text-decoration:none;transition:color 250ms}.hover-target:before{position:absolute;content:'';height:0;border-radius:2px;bottom:0;left:-10px;width:calc(100% + 20px);background-color:var(--white);transition:height 250ms;mix-blend-mode:difference;opacity:.6;display:none}.hover-target:hover:before{height:100%}.hover-target:hover{z-index:5;color:var(--yellow)}
CSS Minifier Tool Documentation
The API has changed, to see more please click here
To minify/compress your CSS, perform a POST request to

API https://www.toptal.com/developers/cssminifier/api/raw
with the input parameter set to the CSS you want to minify.

Hire the top 3% of freelance talent
Join the Toptal Network
Copyright 2010 - 2023 Toptal, LLC
Privacy Policy
Website terms
By continuing to use this site you agree to our Cookie Policy Privacy Policy, and Terms of Use.

Got it