Paint properties control how objects look on the artboard and apply to all vector-based objects like paths, shapes, and text.
Paint mode
You can control what solid color or gradient is used to fill the inside of a vector object or to draw its contour by switching between Fill mode and Stroke mode. To do this you can press on your keyboard, or simply click on the fill or stroke controls.
Paint opacity
You can also control how transparent the fill or the stroke of an object is with the help of the Fill opacity and Stroke opacity controls, depending on the selected paint mode.
Paint types
The following paint types are available:
- - No paint
- - Solid color paint
- - Linear gradient paint
- - Radial gradient paint
- - Radial gradient with focal point
Solid colors
Solid colors are flat, uniform colors applied to vector objects either as a fill or a stroke. They are the most basic form of color application and are made from a single, unchanging hue. We also support an alpha channel for solid colors, giving users options to set transparency directly on the color.
The easiest way to edit the color of an object is to simply use the color wheel control. The color text field will show the value of the current color depending on which format is selected. Currently, we support the following formatting options: HEX, RGB, HSL, and HSV. You can also modify the solid color of objects by manually editing the color text field. Alternatively, you can use the color picker to select a color from the screen.
Gradients
A gradient is a smooth transition between two or more colors, called color stops. Unlike solid colors, gradients allow you to create natural-looking color blends, shading, highlights, and dynamic visual effects within vector objects.
Color stops
You edit the color of a color stop just like you would in the case of solid colors. To add a new color stop, click on the color stop bar, and a new color stop will be automatically inserted at the specified position. You can change the position of a color stop by dragging it with the mouse or by pressing the left and right arrow keys on your keyboard. To delete a color stop, click on the desired color stop to select it, then click on the button. You can also inverse the order of the color stops by clicking on the button.
Spread method
The spread method determines how a shape is filled beyond the defined edges of a gradient. The possible values are: Pad, Reflect, and Repeat.
Absolute values
By default the coordinate values for gradients are expressed in percentages, relative to the object's bounding box. To switch to absolute values, click on button. To switch back to percentages, click again on button.
The idea behind switching to absolute values is the fact that you can create "shared gradients" effects, like in the image below.
Settings
The specific settings of the gradient depends on the gradient type. To show or hide the gradient settings box, toggle the button.
Linear gradient
The linear gradient have the following settings:
- Specific settings
- Set the start point's and coordinates. You can click on the button to set the coordinate values to the center of the object's bounding box. Clicking and holding on button will open a dropdown where you can set the coordinate values to other regions of the object's bounding box.
- Set the end point's and coordinates. You can click on the button to set the coordinate values to the center of the object's bounding box. Clicking and holding on button will open a dropdown where you can set the coordinate values to other regions of the object's bounding box.
- Transform settings
- Set the rotation angle .
- Set the aspect ratio coefficient .
Radial gradient
The radial gradient have the following settings:
- Specific settings
- Set the center point's and coordinates. You can click on the button to set the coordinate values to the center of the object's bounding box. Clicking and holding on button will open a dropdown where you can set the coordinate values to other regions of the object's bounding box.
- Set the radius lenght .
- Transform settings
- Set the rotation angle .
- Set the aspect ratio coefficient .
Radial gradient with focal point
The radial gradient with focal point have the following settings:
- Specific settings
- Set the main center point's and coordinates. You can click on the button to set the coordinate values to the center of the object's bounding box. Clicking and holding on button will open a dropdown where you can set the coordinate values to other regions of the object's bounding box.
- Set the focal center point's and coordinates. You can click on the button to set the coordinate values to the center of the object's bounding box. Clicking and holding on button will open a dropdown where you can set the coordinate values to other regions of the object's bounding box.
- Radius settings
- Set the main radius lenght.
- Set the focal radius lenght.
- Transform settings
- Set the rotation angle .
- Set the aspect ratio coefficient .
