Getting Started
Layout
Components
Design
Gradient Generator
Take advantage of our versatile gradient generator to craft a dual-colored gradient tailored to your needs. Our generator offers two convenient options for choosing colors - either select from the color picker or directly input your preferred color hex code. Plus, you can adjust both the position of the colors and the degree of the gradient to create it.
1- linear-gradient: This is a CSS function that generates an image of a gradient along a straight line.
2- direction: This is the direction or angle of the gradient. This is usually specified in degrees (e.g., 90deg), but can also be specified using keywords such as "to top", "to right", "to bottom", and "to left", which respectively correspond to 0deg, 90deg, 180deg, and 270deg.
3- color1 position1: This is the first color stop of the gradient. color1 is the color at this stop, and position1 is the location along the gradient line where this color stop is placed. The position can be a percentage (e.g., 30%) or a length (e.g., 50px). If no position is provided, color stops are evenly spaced.
4- color2 position2: This is the second color stop of the gradient. The same principles as for the first color stop apply here. The color transition begins from the first color stop and completes at the second one.