50 CSS Gradient Border Examples

An agglomeration of the top free CSS gradient border code examples. Each of these CSS gradient borders contains unique designs, animations, effects, and colors that can be utilized to beautifully style the borders of various elements within your web application.

colorful css gradient border

Hover to play
Title:

Animated shapes border gradient

Author:

Sam Zabala

Created on:

January 31, 2019

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

An animated, attractive css border gradient created using HTML and CSS. Three different shaped border gradient with animation effect gives a rich look to the content.

Title:

Two toned border gradient

Author:

Patryck

Created on:

February 20, 2019

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

The two-color linear gradient is styled using pure HTML and CSS for a basic, responsive border gradient.

Title:

Rainbow border gradient

Author:

Jeremy

Created on:

July 01, 2021

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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:

Two toned box shadow border gradient

Author:

Alexandr

Created on:

December 24, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated border and fill button

Author:

Deven Blackburn

Created on:

February 17, 2017

Made with:

HTML, SCSS, JS

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Transparent diagonal gradient border

Author:

Konstantin

Created on:

July 12, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

A transparent border gradient beginning from the top left corner with a beautiful glass like effect as you move forward. The borders fade in from top to bottom and left to right.

Title:

Side linear border gradient

Author:

Chris Coyier

Created on:

December 14, 2018

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Dashed border gradient

Author:

Ana Tudor

Created on:

June 23, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

On hover css border gradient

Author:

Valerio Radice

Created on:

March 12, 2019

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Round gradient border

Author:

Digggid

Created on:

July 14, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated css gradient border

Author:

Mike Schultz

Created on:

November 02, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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

Author:

John Leon

Created on:

April 24, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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:

Corner border gradient

Author:

alphardex

Created on:

December 08, 2019

Made with:

HTML, CSS, JS

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Shiny border gradients

Author:

Tihani

Created on:

March 10, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated conic border gradient

Author:

Michelle Barker

Created on:

November 08, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Spinning border gradient

Author:

Ash hitchcock

Created on:

June 11, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Move with mouse border gradient

Author:

dc10

Created on:

February 19, 2021

Made with:

HTML, CSS(SCSS), JS

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated border gradient button

Author:

James

Created on:

May 08, 2019

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Input field gradient border focus fun

Author:

Rik Schennink

Created on:

December 14, 2017

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated multi color border gradient

Author:

Bibby

Created on:

July 06, 2016

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Conic border gradient

Author:

Adam Argyle

Created on:

August 20, 2021

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Gradient border mixin

Author:

Eli Fitch

Created on:

August 09, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

A simple and classic border gradient created with the shades of blue and green around the input element gives a rich look to the website. It is created using HTML and SCSS.

Title:

Simple linear border gradient

Author:

Travel Ricks

Created on:

July 25, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Gradient border in CSS

Author:

Takashi Fujino

Created on:

August 17, 2019

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

A graceful, attractive border gradient created using three colors to give a rich look to the HTML element. It is created using pure HTML and CSS.

Title:

Side border gradient

Author:

Zinee

Created on:

January 13, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated Score border gradient

Author:

Robert Borghesi

Created on:

August 29, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated glowing border gradient

Author:

Brendan

Created on:

June 20, 2018

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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

Author:

Airen

Created on:

November 06, 2018

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Houdini gradient border button

Author:

alphardex

Created on:

November 09, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Double gradient border

Author:

Tom

Created on:

November 26, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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

Hover to play
Title:

Rainbow gradient border

Author:

Adam Jagosz

Created on:

August 27, 2021

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Glowing animated border gradient

Author:

TomyBoy

Created on:

June 12, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Glowing ring border gradient

Author:

Souravb786

Created on:

October 29, 2021

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

A classic and alluring rotating ring created using three color in linear gradient. It is created using simple HTML and CSS. The animation is set at 0.8s linear for infinite time.

Title:

Multi color block border gradient

Author:

Otmane

Created on:

February 14, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

No

Dependencies:

nan

Compatable 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:

Multi color square border gradient

Author:

Airen

Created on:

August 29, 2018

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

A responsive border gradient created around the HTML element with two to three color shades for each. Some has rounded corner where as other has pointed one. Some elements has box shadow and different border set with border radius giving a appealing look to the content.

Hover to play
Title:

Animated gradient border button

Author:

Justin Brown

Created on:

September 26, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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:

Simple multi color border gradient

Author:

Kmlkmljkl

Created on:

October 21, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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:

Gradient border using CSS

Author:

Santosh Goswami

Created on:

April 19, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

A delightful rainbow color border gradient created on a black background with the box shadow using pure HTML and CSS.

Title:

Block CSS border gradient

Author:

Chris Coyier

Created on:

April 07, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Firefox, Google Chrome, Edge, Safari

Code description:

An elegant border gradient created with two colors on the white and black background gives a classic look to the HTML elements. It is created using HTML and SCSS.

Title:

Multi color sides border gradient

Author:

Stephanie Eckles

Created on:

December 13, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Gradient border button

Author:

Declan de Wet

Created on:

April 25, 2014

Made with:

HTML, CSS(Stylus), jQuery

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated line on top border gradient

Author:

Jonathan Dauz

Created on:

September 06, 2013

Made with:

HTML, CSS(SCSS)

Responsive:

No

Dependencies:

nan

Compatable 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:

Two toned repeating vorder gradient

Author:

Ananya Neogi

Created on:

August 14, 2020

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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:

Circular gradient border

Author:

Irawachaloco

Created on:

August 25, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Dashed conic and radial gradient border

Author:

Ana Tudor

Created on:

March 16, 2019

Made with:

HTML(Pug), CSS(SCSS), JS(Babel)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated gradient border

Author:

Grunkle Stan

Created on:

October 13, 2017

Made with:

HTML, CSS(Less)

Responsive:

Yes

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Border gradient mixin

Author:

John Grishin

Created on:

March 22, 2015

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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

Author:

Mark

Created on:

December 03, 2019

Made with:

HTML(Pug), SCSS

Responsive:

No

Dependencies:

nan

Compatable 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:

Toned border gradient

Author:

Dead Beef

Created on:

February 26, 2020

Made with:

HTML, CSS, JS

Responsive:

No

Dependencies:

nan

Compatable 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.

Hover to play
Title:

Animated shadow border gradient

Author:

Weston

Created on:

April 29, 2021

Made with:

HTML, CSS(SCSS)

Responsive:

Yes

Dependencies:

nan

Compatable 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.