If you are bored with CSS border colors on buttons or picture frames on your web pages, replacing with border gradient is the right idea. CSS3 allows us to explore colors precisely the colors on the borders of an HTML element. If in the past, we only knew dull colors on borders such as red, black, green even to make a border color gradient, we have to outsmart it by adding a gradient image background. In the CSS3 era, all that could be made with just one line of CSS code. This tutorial will show you how to use gradient border in css.
Definition of Gradients Color
My assumption, you all already know what gradient color is? Gradient or color gradation is a color scheme that can be developed from two or more colors so that it makes certain levels of color by not destroying and changing the color itself.
In other words, the gradient color is the color development or color changes that occur when two or more colors are combined.
Examples of color gradients :
What if we want to apply a border color gradient like the following button image?
Of course, it can be overcome with CSS3. Still curious? Don’t worry, I’ll share some recent CSS border gradient examples.
Make Gradient Border CSS
CSS allows us to manipulate or change the size, color, and style or shape of the border. If you previously used the border property in CSS. To create a gradient border requires border-image-source and border-image-slice properties. This feature is only owned by CSS3. So before using CSS3, make sure the your browser supported (Use the latest browser).
Property border-image-source
a CSS property is used to specify the source of the image used to create the border-image of the HTML element.
Border-image-source values can be URLs to rasters, vector-based images (SVG), or URI data.
Property border-image-slice
The border-image-slice CSS property divides the image specified by border-image-source into 9 regions. This region forms the components of the border-image element.
border-image-slice used to effect the desired gradient CSS border reached.
Example border gradient
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> div{ margin: 0 auto; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; } .box { border: 10px solid; border-image-source : linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 27%, rgba(0,212,255,1) 100%); border-image-slice : 1; } </style> |
Shorthand border-image-source and border-image-slice with border-image.
border-image is used to shorten the use of border-image-source and border-image-slice properties.
Here’s the same example as before using border-image:
1 2 3 4 | .box { border: 10px solid; border-image : linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 27%, rgba(0,212,255,1) 100%) 1; } |
Various of CSS gradients border
To create a gradient border, we can use 3 types: linear, radial, and conic gradient.
Create a linear gradient border CSS
To make a linear gradient, we use the linear-gradient function in CSS. The linear-gradient() function creates an image consisting of several color transitions along in straight line.
Example left-right linear border gradient:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | div{ margin: 0 auto; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; } .box { border: 10px solid; border-image-source : linear-gradient(to right, #f64f59, #c471ed, #12c2e9); border-image-slice : 1; } button{ height:100px; width:200px; background-color:black; color:white; font-size:22px; margin : 0 auto; border: 3px solid; border-image-source: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); border-image-slice :1; } |
Example top-bottom linear border gradient:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | div{ margin: 0 auto; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; } .box { border: 10px solid; border-image-source : linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9); border-image-slice : 1; } button{ height:100px; width:200px; background-color:black; color:white; font-size:22px; margin : 0 auto; border: 3px solid; border-image-source: linear-gradient(to top, #f64f59, #c471ed, #12c2e9); border-image-slice :1; } |
Create radial-gradient border CSS
To create a radial gradient, you can use the radial-gradient() function in CSS. radial-gradient() CSS makes progressive transitions of some colors that radiate from the origin.
Example of radial border gradient:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | div { margin: 0 auto; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; } .box { border: 10px solid; border-image-source: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%); border-image-slice: 1; } button { height: 100px; width: 200px; background-color: black; color: white; font-size: 22px; margin: 0 auto; border: 3px solid; border-image-source: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%); border-image-slice: 1; } |
Create conic CSS gradient border
The conic-gradient() function creates a gradient color that is rotated around the midpoint.
Example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | div { margin: 0 auto; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; } .box { border: 10px solid; border-image-source: conic-gradient(red, orange, yellow, green, blue); border-image-slice: 1; } button { height: 100px; width: 200px; background-color: black; color: white; font-size: 22px; margin: 0 auto; border: 3px solid; border-image-source: conic-gradient(red, orange, yellow, green, blue); border-image-slice: 1; } |
Conclusion
In CSS3, we can build web design without images. Unlike before, we made css gradient border using border image that cause web pages to become heavy. Using CSS3, we can experiment without limits.
The CSS border gradient can be used on all HTML elements like div, span, button.
Reference : https://developer.mozilla.org/id/docs/Web/CSS/border-image-source
Thus a brief tutorial on gradient border in CSS may be useful.
Leave a Reply