Colir

What is Colir?

Colir is a web-based gradient generator that lets you create custom gradients using curve-based control rather than fixed linear or radial rules. It renders gradients in real time using GPU acceleration and provides visual effects and blend modes to refine the final look.

The core purpose of Colir is to help designers and creators produce gradients with more controllable flow and texture (and fewer visual artifacts like banding), then export them for use in projects.

Key Features

• X/Y curve control for gradient flow: Edit two curves (one for X and one for Y) to shape how color moves across the canvas, allowing results beyond simple linear or radial gradients.
• Real-time WebGL rendering: Gradients update interactively with GPU-accelerated WebGL, supporting smooth editing at higher resolutions without a render wait.
• 12 blend modes for layered effects: Apply multiple blend modes (e.g., Multiply, Screen, Overlay, Difference) and combine them with curves to change how gradient layers interact.
• Visual effects to control texture and edges: Use effects including noise (to reduce banding), feather (soften edges), glitter, distortion, and patterns, each with its own blend mode.
• Palette presets and color stops: Start from 9 built-in palettes (based around categories such as Vibrant, Warm, Cool, Complementary, and more), then fine-tune by adding and moving color stops on the gradient bar.
• High-resolution export options: Export gradients as PNG or WebP, with selectable scale factors (1× through 4×).

How to Use Colir

1. Start a new gradient in Colir.
2. Pick colors using built-in presets or a color picker, then add/move color stops on the gradient bar.
3. Adjust the curves by clicking to add points and dragging to reshape the X and Y curves to control how the gradient flows.
4. Apply filters/effects (noise, feather, glitter, distortion, patterns) and refine via intensity settings and blend modes.
5. Export your result as PNG or WebP (choose the desired scale), or use the provided share link.

Use Cases

• Brand identity gradients: Create custom gradients that don’t rely on standard linear/radial looks, then export high-resolution assets for use across brand materials.
• Print design prep: Produce gradients with controlled texture and softened transitions (e.g., using feather) and export PNG/WebP at higher scales.
• Web and UI visuals: Generate gradients tailored to a design system, using curve control and layered blend modes to achieve consistent, non-default styling.
• Video and motion backgrounds: Use the gradient workflow to create textured backgrounds that can be placed behind motion assets; Colir also indicates upcoming animated gradients for web and motion design.
• Digital art and illustration: Build gradients with noise/glitter/distortion and combine them through blend modes for painterly or stylized effects.

FAQ

• What outputs does Colir support? Colir can export gradients as PNG or WebP, and it offers scale options from 1× to 4×. A share link is also available to keep and reuse gradients.

• Does Colir render gradients in real time? Yes. The page describes real-time at any resolution rendering using GPU-accelerated WebGL, designed for smooth editing.

• How does curve control differ from typical gradients? Instead of standard linear or radial behavior, Colir lets you edit two separate curves (X and Y) to control how color flows across the canvas.

• What kinds of effects can be applied? The effects listed include noise (to help address banding), feather, glitter, distortion, and patterns. Each effect can be refined with intensity and uses a blend mode.

• Are there planned features beyond the current version? The site notes upcoming features, including AnimatedGradients, additional visual effects and distortion options, templates, and Figma integration. It also states upcoming features are subject to change.

Alternatives

• Vector/design tools with gradient editors: Applications with gradient pickers and layer/blend capabilities can generate gradients, but may rely more on preset gradient types rather than the X/Y curve control workflow described in Colir.
• Image editors for gradient and texture workflows: Tools that combine gradients with noise, masks, and blend modes can produce similar visual results, though they typically require a more manual layering process.
• 3D/Shader graph tools: Shader-based workflows can offer highly flexible gradient shaping and effects, but they may require different technical setup compared with Colir’s web-based editor and export flow.
• Generative gradient libraries or presets: Template-based gradient collections can help start quickly, but they usually trade away detailed curve control and effect blending for faster, less customizable output.