Join the Community
Explore 100s of examples made with the GradientArt editor. Learn from others, share your work.
Loading community creations...
Designer Friendly Interface
Unlock the power of CSS gradients with a set of visual controls for every possible property.
Make it yours.
Try the Carbon Fiber project. Change its colors, strip thickness, and shadows with the same controls you'll find on its project page.
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.
Your design is CSS you can use. See your changes in the code below, or open the project to download an HTML file.
CSS
--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(calc((var(--strip-thickness) / 2)) / 1 * 1%), rgb(0 0 0 / 0.5) calc(calc(((var(--strip-thickness) / 2) + 1)) / 1 * 1%), rgb(0 0 0 / 0.3) calc(calc(((var(--strip-thickness) / 2) + 2)) / 1 * 1%), rgb(255 255 255 / 0) calc(calc(((var(--strip-thickness) / 2) + var(--shadow-size))) / 1 * 1%), rgb(255 255 255 / 0) calc(calc(((100 - (var(--strip-thickness) / 2)) - var(--shadow-size))) / 1 * 1%), rgb(0 0 0 / 0.3) calc(calc(((100 - (var(--strip-thickness) / 2)) - 2)) / 1 * 1%), rgb(0 0 0 / 0.5) calc(calc(((100 - (var(--strip-thickness) / 2)) - 1)) / 1 * 1%), rgb(58 70 83 / 1) calc(calc((100 - (var(--strip-thickness) / 2))) / 1 * 1%)) 0px 0px / 100px 100px repeat repeat, /* -45deg fiber */
linear-gradient(45deg, rgb(255 255 255 / 0) calc(calc((((100 - var(--strip-thickness)) / 2) - var(--shadow-size))) / 1 * 1%), rgb(0 0 0 / 0.3) calc(calc((((100 - var(--strip-thickness)) / 2) - 2)) / 1 * 1%), rgb(0 0 0 / 0.6) calc(calc((((100 - var(--strip-thickness)) / 2) - 1)) / 1 * 1%), var(--color-1) calc(calc(((100 - var(--strip-thickness)) / 2)) / 1 * 1%), rgb(69 90 109 / 1) calc(calc((100 - ((100 - var(--strip-thickness)) / 2))) / 1 * 1%), rgb(0 0 0 / 0.6) calc(calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 1)) / 1 * 1%), rgb(0 0 0 / 0.3) calc(calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 2)) / 1 * 1%), rgb(255 255 255 / 0) calc(calc((100 - (((100 - var(--strip-thickness)) / 2) - var(--shadow-size)))) / 1 * 1%)) 0px 0px / 100px 100px repeat repeat, /* 45deg fiber */
linear-gradient(-45deg, rgb(255 255 255 / 0) calc(calc((((100 - var(--strip-thickness)) / 2) - 1)) / 1 * 1%), var(--color-2) calc(calc(((100 - var(--strip-thickness)) / 2)) / 1 * 1%), var(--color-2) calc(calc((100 - ((100 - var(--strip-thickness)) / 2))) / 1 * 1%), rgb(255 255 255 / 0) calc(calc(((100 - ((100 - var(--strip-thickness)) / 2)) + 1)) / 1 * 1%)) 0px 0px / 100px 100px repeat repeat, /* -45deg fiber */
linear-gradient(var(--background), var(--background)) 0px 0px / 100px 100px repeat repeat; /* Background */Background Layering
Stack multiple background layers to create complex designs. Each layer can have a gradient with multiple color stops, and any other background and gradient properties.
Shape the blend. Add texture.
Go beyond color stops with easing functions and noise layers.
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.
Linear
Steps
Noise layers
Add texture alongside your gradients. Explore fractal noise and turbulence, then tune the frequency, octaves, and seed to make it your own.
Gradient only
With noise
Free Cloud Storage
Save your projects on the cloud, for free! Each project gets a public URL that you can share with others for viewing and editing purposes.
What will you make with gradients?
Start with a blank canvas or follow a spark from the community.
Your next idea belongs here.
GRADIENT
.ART
css