Join the Community
Loading community creations...
Designer Friendly Interface
Make it yours.
Customize
Try different values. Your changes stay in this preview and never change the saved project.
Create variables once and reuse them across layers. Choose which controls to share so visitors can make the design their own, without changing your original.
From canvas to your website.
<!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>Background Layering
Shape it. Arrange it.
Make it your own.
A full path editor.
Every curve, yours.
Draw straight lines and curves, refine vertices and handles, and build shapes from multiple subpaths. Unite, subtract, intersect, or exclude contours without losing their editable points.
Drag any vertex to reshape the path, or focus a vertex and use the arrow keys. Change the top point between a curve and a corner, then adjust its handles.
Align. Spread.
Find your rhythm.
Bring selected layers into line or spread their centers evenly, horizontally or vertically. The same alignment tools work on selected path vertices, too.
These four layers are selected. Try an alignment or spread them out.
Four layers. One selection.
Your artwork.
A new silhouette.
Clipping masks reveal artwork through the visible areas of the layer below. Fill a shape, text, or pattern with a gradient, while keeping both layers editable.
Choose a mask, then switch clipping off to see the original gradient.
Try these demos freely. Your editor project stays untouched.
Think in layers.
Create in folders.
A home for every detail
Toggle an eye to hide a folder. Every layer inside follows along.
Folders become nested HTML elements, so your structure stays intact when you export.
A new angle on
the same layers.
Give it a spin
Adjust the sliders and watch every nested layer move as one.
transform: rotate(-15deg) skew(10deg, 0deg) scale(0.85, 0.85);Same artwork.
Different atmosphere.
filter: blur(1.5px) brightness(115%) drop-shadow(0px 8px 12px rgb(13 234 227 / 0.55));Real CSS filters, rendered live. Your experiments here leave your editor project untouched.
Shape the blend. Add texture.
Easing functions
Control how one color flows into the next. Choose an easing preset or shape your own curve, then adjust the steps to balance smoothness and CSS size.
Noise layers
Add texture alongside your gradients. Explore fractal noise and turbulence, then tune the frequency, octaves, and seed to make it your own.
Free Cloud Storage
What will you make with gradients?
Start with a blank canvas or follow a spark from the community.
Your next idea belongs here.
