GRADIENT
.ART
css
Sign In
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carbon Fiber</title>
<style>
#root {
--color-1: rgb(69 91 110 / 1);
--color-2: rgb(58 71 84 / 1);
--background: rgb(1 6 13 / 1);
--strip-thickness: 40;
--shadow-size: 10;
width: 500px;
height: 500px;
background:
linear-gradient(-45deg, rgb(58 70 83 / 1) calc((var(--strip-thickness) / 2) / 1 * 1%), rgb(0 0 0 / 0.5) calc(((var(--strip-thickness) / 2) + 1) / 1 * 1%), rgb(0 0 0 / 0.3) calc(((var(--strip-thickness) / 2) + 2) / 1 * 1%), rgb(255 255 255 / 0) calc(((var(--strip-thickness) / 2) + var(--shadow-size)) / 1 * 1%), rgb(255 255 255 / 0) calc(((100 - (var(--strip-thickness) / 2)) - var(--shadow-size)) / 1 * 1%), rgb(0 0 0 / 0.3) calc(((100 - (var(--strip-thickness) / 2)) - 2) / 1 * 1%), rgb(0 0 0 / 0.5) calc(((100 - (var(--strip-thickness) / 2)) - 1) / 1 * 1%), rgb(58 70 83 / 1) calc((100 - (var(--strip-thickness) / 2)) / 1 * 1%)) 0px 0px / 100px 100px repeat, /* -45deg fiber */
linear-gradient(45deg, rgb(255 255 255 / 0) calc((((100 - var(--strip-thickness)) / 2) - var(--shadow-size)) / 1 * 1%), rgb(0 0 0 / 0.3) calc((((100 - var(--strip-thickness)) / 2) - 2) / 1 * 1%), rgb(0 0 0 / 0.6) calc((((100 - var(--strip-thickness)) / 2) - 1) / 1 * 1%), var(--color-1) calc(((100 - var(--strip-thickness)) / 2) / 1 * 1%), rgb(69 90 109 / 1) calc((100 - ((100 - var(--strip-thickness)) / 2)) / 1 * 1%), rgb(0 0 0 / 0.6) calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 1) / 1 * 1%), rgb(0 0 0 / 0.3) calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 2) / 1 * 1%), rgb(255 255 255 / 0) calc((100 - (((100 - var(--strip-thickness)) / 2) - var(--shadow-size))) / 1 * 1%)) 0px 0px / 100px 100px repeat, /* 45deg fiber */
linear-gradient(-45deg, rgb(255 255 255 / 0) calc((((100 - var(--strip-thickness)) / 2) - 1) / 1 * 1%), var(--color-2) calc(((100 - var(--strip-thickness)) / 2) / 1 * 1%), var(--color-2) calc((100 - ((100 - var(--strip-thickness)) / 2)) / 1 * 1%), rgb(255 255 255 / 0) calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 1) / 1 * 1%)) 0px 0px / 100px 100px repeat, /* -45deg fiber */
linear-gradient(var(--background), var(--background)) 0px 0px / 100px 100px repeat; /* Background */
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html> Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
#
#
Layers (4)
-45deg fiber
linear
45deg fiber
linear
-45deg fiber
linear
Background
solid
GRADIENT
.ART
css