gradient
studio
+ Linear
+ Radial
+ Mesh
+ Conic
T gradient
⬚ border
⟳ Randomize
⧉ Copy CSS
↓ Export PNG
Layers
Library
Stack
↑
↓
+ Linear
+ Radial
+ Mesh
+ Conic
⊕ Save Current Canvas
drag
handles ·
click
canvas to add mesh node
Properties
✦
Add a layer to begin
Use the + buttons to add linear,
radial, mesh, or conic layers
Stops
+
Direction
180
degrees · drag wheel or slider
Animate rotation
Speed
1.0×
Layer
Blend mode
normal
screen
multiply
overlay
soft-light
hard-light
color-dodge
color-burn
difference
exclusion
hue
saturation
color
luminosity
Opacity
100%
Presets
Stops
+
Shape & Position
Ellipse
Circle
Closest
Farthest
Center X
50%
Center Y
50%
Scale
100%
Animate pulse
Speed
1.0×
Layer
Blend mode
normal
screen
multiply
overlay
soft-light
hard-light
color-dodge
color-burn
difference
exclusion
hue
saturation
color
luminosity
Opacity
100%
Presets
Color Nodes
+
Each node can use a different gradient type. Click ▸ to expand settings.
Global Controls
Blur
60%
Orb size
60%
Brightness
0.65
Animate
Speed
1.0×
Grain texture
Show handles
Layer
Blend mode
normal
screen
multiply
overlay
soft-light
hard-light
color-dodge
difference
exclusion
Opacity
100%
Presets
Stops
+
Rotation & Position
0
start angle
Center X
50%
Center Y
50%
Animate spin
Speed
1.0×
Layer
Blend mode
normal
screen
multiply
overlay
soft-light
hard-light
color-dodge
difference
exclusion
Opacity
100%
Presets
Background
Canvas background
#0d0d12
Export Resolution
CSS Output
· click to copy
Load Collection
This will replace all current layers. Unsaved work will be lost.
Cancel
Load
Text & Border Gradient
✕
Text Gradient
Border Gradient
Gradient
px
400
500
600
700
800
900
Gradient angle
135°
Click code to copy · Uses current active layer's gradient
element
Border width
px
Radius
px
Width
px
Height
px
Gradient angle
135°
Inner background
Technique
border-image
::before pseudo
outline trick
Click code to copy · Uses current active layer's gradient
Rename Collection
Enter a new name for this collection.
Cancel
Rename