<div class="owText text-center" >3d text stroke</div>
@accent: #252527;
@base: #252527;
@scale: white;
body {background:@accent;}
.owText{
text-align:center;
text-stroke:2px white;
position:relative;
text-transform:uppercase;
color: @accent;
font-size: 14vw;
letter-spacing: 1.2vw;
font-weight: 700;
text-shadow:
/*text stroke around letters*/
0 1px 0 lighten(@base,15%),
-1px -1px 0 lighten(@base,15%),
/*main 3d shadow*/
-1px 0px 0 lighten(@base,6%),
-2px 1px 0 lighten(@base,6%),
-3px 2px 0 lighten(@base,5%),
-4px 3px 0 lighten(@base,4%),
-5px 4px 0 lighten(@base,3%),
-6px 5px 0 lighten(@base,2%),
-7px 6px 0 lighten(@base,1%),
-8px 7px 0 @base,
-9px 8px 0 darken(@base,1%),
-10px 9px 0 darken(@base,2%),
-11px 10px 0 darken(@base,3%),
-12px 11px 0 darken(@base,4%),
-13px 12px 0 darken(@base,5%),
-14px 13px 0 darken(@base,6%),
-15px 14px 0 darken(@base,7%),
-16px 15px 0 darken(@base,8%),
/*top right*/
0 -1px 1px @scale,
0 -2px 0px @scale,
/*bottom left corner*/
-15px 14px 0px @scale,
-16px 15px 0px @scale,
-17px 16px 0px @scale,
-18px 17px 0px @scale,
-2px -1px 0 @scale,
-3px -0px 0 @scale,
/*top left corner*/
-19px 15px 0 @scale,
-18px 14px 0 @scale,
-17px 13px 0 @scale,
-16px 12px 0 @scale,
-15px 11px 0 @scale,
-14px 10px 0 @scale,
-13px 9px 0 @scale,
-12px 8px 0 @scale,
-11px 7px 0 @scale,
-10px 6px 0 @scale,
-9px 5px 0 @scale,
-8px 4px 0 @scale,
-7px 3px 0 @scale,
-6px 2px 0 @scale,
-5px 1px 0 @scale,
-4px 0px 0 @scale,
/*lower right / (upper right side for capital T like H etc letters. */
0px 2px 0px @scale,
-1px 3px 0px @scale,
-2px 4px 0px @scale,
-3px 5px 0px @scale,
-4px 6px 0px @scale,
-5px 7px 0px @scale,
-6px 8px 0px @scale,
-7px 9px 0px @scale,
-8px 10px 0px @scale,
-9px 11px 0px @scale,
-10px 12px 0px @scale,
-11px 13px 0px @scale,
-12px 14px 0px @scale,
-13px 15px 0px @scale,
-14px 16px 0px @scale,
-15px 17px 0px @scale;
}
View Compiled
This Pen doesn't use any external CSS resources.