infoOverview

Colir is a gradient editor that uses curves to control how colors blend across the canvas. You set the output size and options in the Canvas panel, add and position color stops on the gradient bar, then shape the gradient using X and Y curves. Optional effects—distortion, glitter, and patterns—add texture and variation. When you’re ready, export the result as an image file.

dashboard_customizeTemplates

Templates help you start from a curated set of ready-made gradients. Click Templates to open Curated Templates, then pick one to load it into the editor.

dashboard_customize Templates

Curated Templates

close

Aurora

Corv

Friday

Giger

Hlo

Kinmino

Lau

Lo

Lurux

Magma

Plasma

Polumia

Potik

Promin

Vertex

Zelen

crop_freeCanvas

Width and Height — Sets the output resolution (in pixels) for your exported image.

Blend mode — Controls how the colors mix together across the canvas, changing the overall look and contrast of the gradient.

Feather — Softens the outer edges of the gradient.

Noise — Adds a subtle grainy texture over the gradient, this can reduce banding and add a more organic look.

paletteColors

Gradient bar — The horizontal bar represents the gradient from left to right. Click on the bar to add a new color stop at that position. Drag a stop to move it and change where that color appears. To remove a stop, select it and press the trash icon.

Color picker — Select a stop, then set its color using the swatch and hex field. Clicking the swatch opens a picker (spectrum + hue) for fine tuning. You can also use Color Template to generate palettes (Warm/Cool/Vibrant, etc.). Stops define the base palette; the X and Y curves control how those colors are distributed across the canvas.

Randomize — Use the Randomize Colors button to generate a new set of colors across the gradient bar. You can then adjust individual stops with the color picker.

show_chartCurves

Colir uses X and Y curves to control how the gradient is mapped onto the canvas. Each curve has its own tab; the horizontal axis usually corresponds to position along the gradient (from the first to the last color stop), and the vertical axis to how that maps to the canvas.

X / Y tabs — Switch between the X and Y curve editors.

Invert — Flips the currently selected curve.

Randomize Curves — Generates a new random shape for the curves.

Smoothing — Toggles smoothing for the curve line.

Curves visible — Shows or hides the curve overlay on the canvas.

Adding points — Left-click on a curve to add a control point at that position. More points give you more control over the shape.

Moving points — Drag any point to change the curve. The gradient updates in real time so you can see how bends in the curve affect where colors appear (e.g. compressing one region, stretching another).

Removing points — Right-click a point to remove it. You can’t remove the first/last points (endpoints), and you need at least 3 points to remove any.

Together, X and Y let you create non-linear, custom distributions—far beyond a simple left-to-right or radial gradient.

wavesDistortion

The Distortion panel warps or displaces the gradient so it’s no longer a perfect rectangle. This adds organic or geometric variation without changing your color stops or curve shapes.

Intensity — How strong the displacement is. Low values give a subtle wave or ripple; higher values create obvious bends, folds, or swirls.

Type / mode — Choose the distortion algorithm (e.g. Organic, Ridged, Waves, Kura, Tayu). Some types have extra controls (for example, Waves adds wave frequency).

Scale / frequency — When available, this controls the size of the distortion pattern. Smaller scale means finer, more detailed warping; larger scale gives broader, smoother waves.

starGlitter

Glitter overlays a sparkle or shimmer effect on top of your gradient—small highlights that can read as glitter, dust, or subtle noise.

Density — How many glitter particles (or highlights) appear per area. Low density gives a few scattered sparkles; high density creates a dense, almost sandy or frosty look. Adjust to taste: too high can overwhelm the gradient, too low may be barely visible.

Size — The size of each glitter particle or highlight. Smaller values give a fine, subtle shimmer; larger values make more visible, chunky sparkles.

Intensity / opacity — How bright or visible the glitter is. Lower values blend it softly into the gradient; higher values make it pop. Often you’ll want to keep this moderate so the gradient still reads clearly. Glitter color is derived from the gradient, and you can blend it with the gradient using the blend mode control.

grid_onPatterns

Patterns add a repeating texture effect over the gradient. They tile to fill the canvas and can add structure and depth.

Pattern choice — Choose the pattern type (e.g. Dot grid or Line). Each type has its own controls (dot size and distance, or line thickness, distance, and angle).

Scale — Dot size and distance (or line thickness and distance) control how large and how spaced the pattern elements are. Smaller values give a finer, denser pattern; larger values give bigger, more spaced-out elements.

Color — Set the pattern color so the overlay uses a specific tint. Use the color swatch and picker to choose; the pattern is drawn in this color on top of the gradient.

Opacity — How strong the pattern appears over the gradient. Lower opacity keeps the gradient dominant with a subtle overlay; higher opacity makes the pattern more visible.

Blend mode — Controls how the pattern is combined with the gradient.

downloadExport

Export renders your current design to an image file using the canvas size and all visible effects (gradient, curves, distortion, glitter, patterns).

Share — Use the Share button to generate a link to your current gradient. It’s useful for sending it to somebody or saving it for yourself to revisit later.

Format — Choose the file type (e.g. PNG for lossless quality and transparency, WebP for smaller files). PNG is usually best for design assets.

Resolution / scale — The export uses the dimensions set in the Canvas panel. Use the scale dropdown (1×, 2×, 3×, 4×) to export at a multiple of the canvas size (e.g. for retina).

After exporting, the file is downloaded to your device.