Skip to main content

How to work on your design: color palette & multi‑point gradient

In this article, you’ll learn how to apply color palettes and multi‑point gradients

Dmytro avatar
Written by Dmytro
Updated yesterday

Onepage offers you a variety of options to customize your projects individually.


Table of contents:


Picking a color palette

Click on Design ➡️ Color to access the color palettes for your project.

As you might see, you're free to choose one of our pre-designed color palettes, where each is a set of matching colors for modern designs.

Select one from the list or create your own:

If you want an individual color palette and struggle to pick the right colors, we suggest you use palette generators like coolors or colorhunt.

📌 Please note: Remember that projects share the same font and color settings. Once you change a color palette within a project, it automatically changes on every other page inside your website.


Selecting fonts

You’ll find our popular fonts in Typography. Pre-sets are specifically made to give your project a coherent look. They're awesome by default. You will find more information in our dedicated article:


Gradient background

In Onepage you can add gradients either for an entire section, individual containers inside the section or CTA buttons. Let us review how to access the gradient settings, explain the three gradient types (Linear, Radial, Mesh), and show you how to save your favourite combinations as presets.

Apply a gradient to section background

Hover over the target section. Click the brush icon in the top‑right control panel. In the panel that opens, switch to the third option (Gradient).

Apply a gradient to a specific container

Hover over the desired container and the container’s control panel will appear. Click the brush icon on that panel. In the pop-up, open Background. Select the fourth option (Gradient). This lets you style that single container without affecting the rest of the section.

Apply a gradient to a button

You can apply a gradient background to a button as well. Click on the button, switch to style settings (brush symbol), click on background and select the 4-th option (gradient).


Apply a gradient to text

To add a gradient to a text element or heading, hover over the desired element. A three-dot button will appear to the left of it, click this button. Then select Edit and open Text color. Finally, choose the fourth option (Gradient).


Gradient Types & Controls

Before you start setting up the gradient, you can select the base color. Simply click on Background and pick a color.

In Onepage, you can choose between three gradient types — Linear, Radial and Mesh.

  • The Linear gradient lets you define color stops and set the angle of the fade, with a simple toggle to invert its direction.

  • Radial gradients allow you to add multiple color stops that radiate from a center point, whose horizontal position you can freely adjust. Inverting position is also possible.

  • Mesh gradients offer the greatest creative freedom: you place multiple color points anywhere within the area and fine‑tune each point’s X and Y position. You can even randomize the palette, either limited to your project’s predefined colors or fully randomly generated.


Adding and removing color stops

Simply click anywhere on the gradient settings to add a new color stop. Click on the color stop to edit the color.

To remove a color stop, click on the burger button below the gradient settings. A list of all color stops will be displayed, where you can delete and also add color stops.


Saving & reusing presets

After crafting your gradient, click add color to save the preset . Your new preset will appear in the presets list for quick reuse in any section or container.


Related articles


💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂

Did this answer your question?