GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
--color-1: rgb(69 91 110);
--color-2: rgb(58 71 84);
--background: rgb(1 6 13);
--strip-thickness: 40;
--shadow-size: 10;
width: 500px;
height: 500px;
background:
linear-gradient(-45deg, rgb(58 70 83) 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%), transparent calc(((var(--strip-thickness) / 2) + var(--shadow-size)) / 1 * 1%), transparent 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) calc((100 - (var(--strip-thickness) / 2)) / 1 * 1%)) 0 0 / 100px 100px, /* -45deg fiber */
linear-gradient(45deg, transparent 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) 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%), transparent calc((100 - (((100 - var(--strip-thickness)) / 2) - var(--shadow-size))) / 1 * 1%)) 0 0 / 100px 100px, /* 45deg fiber */
linear-gradient(-45deg, transparent 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%), transparent calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 1) / 1 * 1%)) 0 0 / 100px 100px, /* -45deg fiber */
linear-gradient(var(--background), var(--background)) 0 0 / 100px 100px; /* Background */
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
#
#
<iframe
src="https://gra.dient.art/embed/lhk0fierr8"
title="Carbon Fiber | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (4)
-45deg fiber
linear
45deg fiber
linear
-45deg fiber
linear
Background
solid
GRADIENT
.ART
css