The first tile in the color pallet is transparency.
Adjust the 'A' slider to modify the opacity of any color.
Saving brand colors to your account
First select a color or gradient you'd like to save.
Click the plus button in the color menu to save it to your account.
Advanced Gradient Guide
To start building a gradient, click the Solid Color dropdown to select a gradient type.
Click the Add button to add another color to the gradient.
You can click on the color squares to modify each of the seperate properties.
Select a color from the grid or use the sliders to modify each part of the gradient.
You can drag the squares to the left and right in order to modify the gradient pattern.
Click the x button once a gradient square is selected to remove it.
Setting an On-Hover Color
Click the default color dropdown to select an on-hover color.
While having the on-hover color selected in the dropdown, you will preview the new color.
Editing Borders or Outlines
Click on any element to set a border or outline.
Then select the Borders menu to initiate the outline creation process.
Setting Border Style
There are several types of borders you can create with Aiva. Click the dropdown in the borders menu to change the style. Some styles can be seen below:
Solid Line
Dashed Line
Dotted Line
Double Line
Choosing Border Color
Click on the color tile in the borders menu.
Select a non-gradient color to set it as your border color.
Setting Border Width
Enter the size of pixels into the input boxes to change the border size.
Enter a pixel value in the left-most input field to set a border on every side.
If you'd like to set specific sizes you can use the other 4 input fields. They represent the following | Top Border | Left Border | Bottom Border | Right Border |
Rounding the Border
In the Border Roundness input field enter a value from 1-88 px.
Higher values result in rounder edges.
Adding Shadows
You can add a shadow to any element on Aiva using the Shadows option in the borders menu.
Start off by toggling the Shadow button.
Changing Shadow Color
Click the color tile to select a shadow color.
You can only use solid colors as shadows.
Advanced Shadow Techniques
Shadow Size
Increase this slider to create a larger shadow around the element you've chosen.
Shadow Density
Increasing the pixel value for density makes the shadow less dense/dark.
Shadow Distance
Increasing shadow distance moves the shadow in the direction of the angle you've set.
Shadow Color
Click the color tile select a shadow color.
Note: you can only select a solid color as a gradient.
Shadow Angle
Click and drag the angle dial to change the angle of the shadow's distance.
You can also modify the angle by editing the angle text.