CSS Border Blend

Border Width (px)

Border Radius (%)

Gradient Angle (deg)

CSS Output:

Border Colors:

Open the Tool: Access the CSS Border Blend Generator in your web browser.
Adjust Border Width: Use the Border Width (px) slider to set the desired border width in pixels.
Set Border Radius: Use the Border Radius (%) slider to define the roundness of the border corners in percentage.
Choose Gradient Angle: Adjust the Gradient Angle (deg) slider to set the angle of the gradient applied to the border.
Pick Border Colors: Click on the color pickers to select the colors for the border. By default, two color pickers are provided, but you can add more by clicking the ADD COLOR button.
Add More Colors: Click the ADD COLOR button to add additional color pickers. Each new color picker allows you to choose a new color for the gradient.
View and Copy CSS Output: The CSS code for your design is automatically generated and displayed in the CSS Output textarea. Click the COPY CSS button to copy the generated CSS code to your clipboard.
Randomize Settings: Click the RANDOM ALL button to automatically set random values for border width, radius, gradient angle, and colors.
Apply Changes: As you adjust sliders and color pickers, the border preview updates in real-time to reflect your changes.