Applying Gradient Fills to Icons in Breakdance
This article will guide you through the process of using gradient fills for icons. The tutorial covers both linear and radial gradients, demonstrating how to apply different colors and adjust the gradient angle for a visually appealing effect. Additionally, it explains how to use gradient fills for the background of icons.
Creating Gradient Fills for Icons
Adding an Icon and Applying Linear Gradient
- From within Breakdance, go to ‘Add’ and select an icon to add to your page.
- Click on the color picker for the icon color and select ‘Linear’ from type chooser at the top left.
- Add color stops to the gradient bar and choose your colors.
- Adjust the angle of the gradient using the angle chooser to position the colors as desired.
Adjusting Gradient Details
Further refine your gradient by adjusting the lightness of colors and the position of the stops to achieve the desired effect.
Using Gradient Fills for Icon Backgrounds
Applying Gradient to Background
- Select the icon.
- In the Properties Panel under Design > Icon > Style, choose the Solid style for the icon.
- Open the color picker and use the type chooser at the top left to switch to ‘Linear’ for the icon’s background.
- Use the gradient picker to apply and adjust the gradient on the background, similar to the icon fill.
Editing Gradient Stops
To modify the gradient stops, hold the shift key and hover over a stop to show a delete (x) icon. Click on the stop to delete it. To add a stop, simply click on the gradient bar.
Additional Notes
This method offers a creative way to enhance icons in Breakdance, giving them a unique and customized look with gradient fills. Experiment with different colors and angles to find the best combination for your design.
