Title:
Gradient border+border-radius
Created on:
September 26, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A minimal yet beautiful CSS gradient border design created with HTML and SCSS. Its code is very easy to customize and implement in applications.
Title:
Simple linear border gradient
Created on:
July 25, 2020
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A simple, beautiful linear border gradient created using two colors. It is created using pure HTML and SCSS.
Title:
Animated line on top border gradient
Created on:
September 06, 2013
Made with:
HTML, CSS(SCSS)
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A simple, linear gradient created on the top with rainbow color to give glowing effect to the page. This is created using HTML and CSS.
Title:
Rainbow gradient border
Created on:
August 27, 2021
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A responsive rounded rectangle rainbow colored conic border-gradient created around the animated text field using HTML and CSS. This gives animated effect to the input field as well.
Title:
Animated border and fill button
Created on:
February 17, 2017
Made with:
HTML, SCSS, JS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant and simple animated border gradient and fill button in the shades of blue and green. When you hover over the button, it fills up the HTML element. It is created using HTML, SCSS, and JS.
Title:
Glowing animated border gradient
Created on:
June 12, 2020
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A graceful, luminous animated border-gradient created around the button using HTML and CSS. This is created with the gradients of two color giving a sophisticated effect to button.
Title:
Conic border gradient
Created on:
August 20, 2021
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant, responsive border gradient created around the image with border radius using HTML and CSS. This is simple but sophisticated border gradient.
Title:
SVG Gradient Border - Button
Created on:
October 28, 2017
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A beautiful CSS gradient border. Designed as an underline with continuous gradient shift animation, It beautifully morphs into a gradient border upon hover.
Title:
Animated gradient border button
Created on:
September 26, 2018
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A modern, multi color animated border gradient that changes the text on hover over the element gives a very attractive look to the HTML element. This is created using basic HTML and CSS to give very smooth animating effect.
Title:
Animated multi color border gradient
Created on:
July 06, 2016
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A multi color thick, beautiful border gradient demonstrating animated and non animated border gradient created using HTML and CSS. An animated example shows glowing thick border with luminous two color border gradient.
Title:
On hover css border gradient
Created on:
March 12, 2019
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A stylish and interactive border gradient created using pure HTML and CSS. On hover over the border it slightly brightens itself giving a beautiful animation effect. The web page element is styled with linear gradients on its top-left and bottom-right corners.
Title:
Toned border gradient
Created on:
February 26, 2020
Made with:
HTML, CSS, JS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant, beautiful linear gradient border created around HTML element, and on the Text with two colors. This is created using HTML and CSS and JS.
Title:
Round gradient border
Created on:
July 14, 2018
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A round border gradient style with transparent center where you can add text or other elements. It also has an animated background that gradually changes colors.
Title:
Animated css gradient border
Created on:
November 02, 2020
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant and responsive border gradient style that is created using pure HTML and CSS. It smoothly changes the gradient colors of the border.
Title:
Glowing border gradient
Created on:
April 24, 2020
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A two colored glowing and simple border gradient style created using pure HTML and CSS. It creates a glowing effect with the gradient colors.
Title:
Move with mouse border gradient
Created on:
February 19, 2021
Made with:
HTML, CSS(SCSS), JS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An attractive and modern border gradient that moves an element according to the movement of mouse pointer to give the 3D look to the movement of an object. It is created using HTML, SCSS and JS.
Title:
Magic Card
Created on:
July 23, 2021
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An amazing-looking border design with a neon glow effect and and gradient shift animation. Upon hover, the border disapears and text is displayed.
Title:
Corner border gradient
Created on:
December 08, 2019
Made with:
HTML, CSS, JS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A two colored border gradient that gives a glowing gradient shadow at the back of the webpage element. The border is also animated with the shadow color gradually intensified at top-right and bottom-left corners.
Title:
Double gradient border
Created on:
November 26, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A simple, responsive double lined border gradient created using three colors around the input element. This is created using HTML and CSS
Title:
Glowing ring border gradient
Created on:
October 29, 2021
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An alluring rotating animated circular gradient border using three colors in the linear gradient. It is created using simple HTML and CSS. The animation is set at 0.8s linear for infinite time.
Title:
Animated conic border gradient
Created on:
November 08, 2020
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome only
Code description:
A responsive and animated conic and radiant border gradient created from pure HTML and CSS. It highlights the border by using a gradient from a darker to lighter color.
Title:
Gradient border using CSS
Created on:
April 19, 2019
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A delightful rainbow color border gradient created on a dark background with a box shadow using pure HTML and CSS.
Title:
Animated border gradient button
Created on:
May 08, 2019
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A border gradient style that change the image on hover. On hovering over the element, the image and color of border gradient changes. This is created using HTML and CSS.
Title:
Gradient border mixin
Created on:
August 09, 2015
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A simple yet functional CSS gradient border containing shades of blue and green. This gradient border is easy to customize and utilize in almost any application. It was created using HTML and SCSS.
Title:
Multi color block border gradient
Created on:
February 14, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A decorous, box styled border-gradient with multi color and shadow gives the 3D effect to the HTML element. It is created using HTML and CSS.
Title:
Animated Score border gradient
Created on:
August 29, 2014
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A beautiful, astonished rectangle created using HTML and CSS. When you hover over the rectangle, it displays border gradient along with the text on the rectangle. It looks amazing to display the score board.
Title:
Animated glowing border gradient
Created on:
June 20, 2018
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant, border gradient in midnight blue and teal color along with the black background shadows is created using HTML and CSS. It gives the effect like edge glowing circle.
Title:
Multi color Border gradient around button
Created on:
November 06, 2018
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A beautiful, responsive multicolor border gradient created around the multicolor buttons created using HTML and CSS. Circle and rounded rectangle buttons are created.
Title:
Houdini gradient border button
Created on:
November 09, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An attractive, shiny border gradient created using HTML and CSS. Border moves around the rectangular element to give animated effect.
Title:
Multi color square border gradient
Created on:
August 29, 2018
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A set of responsive CSS gradient borders utilizing two to three colors with various border radius sizes and box shadows which all combine gives an appealing look to content. It was created using using HTML and SCSS.
Title:
Simple multi color border gradient
Created on:
October 21, 2015
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A very simple, rectangular linear border gradient with the shadow effect around the border is created in rainbow color using pure HTML and CSS.
Title:
Block CSS border gradient
Created on:
April 07, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A set of elegant animated CSS border gradients each utilizing two colors with black and white background examples. It is created using HTML and SCSS.
Title:
Multi color sides border gradient
Created on:
December 13, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A simple, sophisticated and easy gradient border that looks great on the modern browsers with a black background websites. It is created using HTML and SCSS.
Title:
Gradient border button
Created on:
April 25, 2014
Made with:
HTML, CSS(Stylus), jQuery
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An alluring, multi color border gradient with the black background is set on the button with a gradient image as a background. It gives a windy effect on hover over the button to give an attractive look to the button. It is created using HTML, CSS and JS.
Title:
Side linear border gradient
Created on:
December 14, 2018
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A elegant red border gradient with borders on right and left sides of the div element created using pure HTML and CSS. The beautiful red border fades in from top to bottom of the content.
Title:
Two toned repeating vorder gradient
Created on:
August 14, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A delightful, linear and repeating gradient border on different sides of element created with two or three colors along with the border radius to give a decent look to HTML elements. This is created using pure HTML and CSS.
Title:
Animated gradient border
Created on:
October 13, 2017
Made with:
HTML, CSS(Less)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A graceful, multi color rounded rectangle border gradient created around the HTML element that glows and changes the color on hover. This is created using HTML and CSS.
Title:
Border gradient mixin
Created on:
March 22, 2015
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A responsive beautiful animated circular ring created with border-gradient using multi color in HTML and SCSS.
Title:
Frame border gradient
Created on:
December 03, 2019
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A classic, beautiful linear gradient border created around the image in two colors on a black background to give a decent framing to the image. This is created using HTML and CSS.
Title:
Animated shadow border gradient
Created on:
April 29, 2021
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A delightful animated shadow of a border in multi color gives an amazing look to the HTML element. The rainbow color animation attracts the user’s attention. It is created using HTML and SCSS.
Title:
Gradient Border
Created on:
December 02, 2019
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A CSS gradient border, although simple in design, the continuous gradient change animation gives it an amazing look and feel.
Title:
Side border gradient
Created on:
January 13, 2017
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant border gradient created using HTML and CSS. This demonstrates creating a partial thick border-gradient on different sides of the element.
Title:
Circular gradient border
Created on:
August 25, 2016
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A dignified, circular linear border gradient created over an image background to give attractive effect to webpage. Border gradient is created with rainbow color using HTML and CSS.
Title:
Input field gradient border focus fun
Created on:
December 14, 2017
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant, impressive border gradient created in shades of blue and green that feathers out when focused on an element. It is created using HTML and CSS.
Title:
Dashed conic and radial gradient border
Created on:
March 16, 2019
Made with:
HTML(Pug), CSS(SCSS), JS(Babel)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
An elegant and attractive radial and conic repeating border gradient. It also has checkboxes that offer the option of visualising origin point and the full continuous gradient as a semi-transparent overlay. All the events are handled using JS. This beautiful border gradient is created using HTML, CSS and JS.
Title:
Rainbow border gradient
Created on:
July 01, 2021
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
With a beautiful rainbow color gradient border, this webpage element is highlighted against a black background. The border is created using pure HTML and CSS.
Title:
Shiny border gradients
Created on:
March 10, 2020
Made with:
HTML, CSS(SCSS)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A beautiful and responsive border gradient style created from shiny colors. It is created using pure HTML and CSS(SCSS) and can be customized in various shiny colors.
Title:
Two toned box shadow border gradient
Created on:
December 24, 2018
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A simple, two-toned linear border gradient is created using HTML and CSS. It gives the content an elegant look where there is a box shadow and border radius.
Title:
Spinning border gradient
Created on:
June 11, 2015
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A spinning border gradient style that creates an effect of a spinning wheel animation with an opaque center. On hovering over the element, the spinning direction is reversed.
Title:
Dashed border gradient
Created on:
June 23, 2020
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Opera, Firefox, Google Chrome, Edge, Safari
Code description:
A multi color and sophisticated dashed border style created using pure HTML and CSS. It can also have transparent or semi-transparent background and the corners stay pretty on resize.
