Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-03 10:31:38 -05:00
Code Issues Activity

📚 Info about gradients (#5843)

Browse source
This commit is contained in:
andrés gonzález 2025-02-13 10:42:56 +01:00 • committed by GitHub
parent 688b9f2194
commit 2d1d1fee1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/img/styling/color-picker-gradient.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 KiB

13
docs/user-guide/styling/index.njk
View file

@ -51,13 +51,24 @@ title: 06· Styling
<ol>
<li><strong>Eyedropper</strong> - Allows you to pick any color of the objects at the viewport.</li>
<li><strong>Color profiles</strong> - Select between RGB, the Harmony Wheel or HSV.</li>
<li><strong>Color type</strong> - Solid, linear gradient, radial gradient or image.</li>
<li><strong>Color type</strong> - Solid, gradient, or image.</li>
<li><strong>Sliders</strong> - Easily manage settings like brightness, saturation or opacity.</li>
<li><strong>Values</strong> - Set precise color values of red(R), green(G), blue(B) and transparency(A).</li>
<li><strong>Libraries</strong> - Switch between recent colors and libraries.</li>
<li><strong>Color palette</strong> - A quick launcher of the palette with the selected library.</li>
</ol>
<h3 id="color-picker-gradients">Gradients</h3>
<p>You can apply gradient fills to layers. To do that select the Gradient type at the color picker.</p>
<figure>
<img alt="Gradient" src="/img/styling/color-picker-gradient.webp"/>
</figure>
<p>You can choose between two types of gradients:</p>
<ul>
<li><strong>Linear Gradient:</strong> A smooth transition between two or more colors along a straight line, with the option to adjust the angle.</li>
<li><strong>Radial Gradient:</strong> A circular color transition that starts with one color at the center and gradually shifts to another at the edges, which could be a different color or a fade to transparency.</li>
</ul>
<h2 id="color-palette">Color palette</h2>
<p>The color palette allows you to have a selected color library in plain sight.</p>
<figure>