animated border gradient css

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}
<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

View another examples Add Own solution

Log in, to leave a comment

3.75

4

Awgiedawgie 440215 points

                                    &lt;p class=&quot;text&quot;&gt;Lorem ipsum dolor sit amet,
  &lt;span class=&quot;text__inner&quot;&gt;
    consectetur adipisicing elit. Voluptates asperiores 
    officiis similique ut id
  &lt;/span&gt;
  accusantium fugit. Amet quod debitis sed tempore 
&lt;/p&gt;

&lt;style&gt;
.text{  font-size: 2rem; }
.text__inner {
  color: currentcolor;
  background-image: linear-gradient(90deg, red, blue); 
  background-size: 0% 3px;
  background-repeat:no-repeat;
  background-position: left bottom;
  transition: background-size ease-in 500ms;
  }
.text__inner:hover {   background-size: 100% 3px;  }
&lt;/style&gt;

Thank you! 4

3.75 (4 Votes)

0

Are there any code examples left?

Find Add Code snippet

New code examples in category Html

Html 2022-03-27 21:55:05 how to kill html
Html 2022-03-27 21:55:02 How to create web urls without extensions
Html 2022-03-27 21:45:11 space between 2 h tags without break
Html 2022-03-27 21:40:13 how to resize submit button in html
Html 2022-03-27 20:40:18 https://www.codegrepper.com
Html 2022-03-27 19:55:09 show image inside table with innerhtml
Html 2022-03-27 19:30:47 html email input
Html 2022-03-27 18:45:01 how to add favicon in html
Html 2022-03-27 18:15:21 picture html
Html 2022-03-27 18:15:11 ex: javaasdasdasdasd

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

stylish border gradient css white gradient border css bordercolor gradient apply gradient to border container border top css gradient border color gradinet css border radius with gradient gradient border in css how to add a gradient border to my whole website border gradient in div gradients border custom gradient colour border css border gradient colors set a gradient background border border gradient css w3schools gradient border cs border gradient css portal how to get gradient border css border style css gradient how to add border linear gradient color in css linear gradient border radius apply gradient to border gradient border radius css linear gradient borders use color gradient in border how to give a div a gradient border with radius how to give a div a gradient border how to change border color to linear gradient border color linear gradient css border bottom gradient color css border-color gradient make a border with many color gradient in css css border with a gradi adding gradients to borders css css gradient border radius border-right gradient css use gradient as border gradient color for border css with radius css gradient on border css border gradient to transparent gradient border framer gradinent border design css gradient border frame How to add gradient border gradient border css radius border-radius gradient css gradient color for border in css how to use gradient border in css border linear gradient css radius css gradient border using after gradient in border css w3school background grieadint css border adding gradient in border color border bottom gradient gradient border with radius css use gradient border color css border with linear gradient border gradients gradient color in css border bottom border gradient css html border top color gradient border gradient css with border radius bored color gradient is gradient border possible in css how to give gradient to border css gredient border css how to apply gradient color to border color in css border linear-gradient css linear gradient in border color make gradient border css border radius gradient css gradient borders set border color gradient gradient rounded border css css major border gradint css border with background linear-gradient css border with linear-gradient how to add gradient border in css gradien border Gradient Borders in CSS border gradient color code hcss linear gradient border linear-gradient in border gradient on border css border gradient color css how to apply gradient to border in css gradient in border color css css border color gardient How to change border color to border gradient how to put border-radius on gradient css border color css gradient add gradient to border html how to use border gradient in css css border color gradient css tricks border gradient linear gradient for borders add linear gradient border color css border gradignet css gradient to border css gradient line across border how to add a gradient border in css color gradient border cs gradient border black to gray make border gradient css border right gradient css border right linear gradient border color gradient color combination border color gradient color comb color the border with linear gradient gradient color on border css color gradient border image css red gradient border button gradient pink border css gradient for border css linear-gradient border animated linear gradient border css animated border gradient css border color linear grain thin border underbackground gradient make border degrade css color gradient border how to apply linear gradient in css on border border lienar gradient css adding gradient to border css border to centre div gradient css border gradient gen css border color gradient inside to outside gradient border using css set linear gradient to border card with border linear gradiend how to add a gradient at borders of an image html border with gradent css how to set border gradient in css add gradient border css gradient innner boder css border color linear gardient gradient css border scss gradient border linear gradient border color css add gradient color to border linear gradient to border in css linear gradient to border how to use gradient color in div border border graadient css linear gradient boroder linear-gradient border with blur background css linear-gradient border css border with gradient html in border-image: linear-gradient(to right, #dc5c34, #92213c); in radius html border in grident css how to make a graidient border in css container border gradient css gradient border on image css border background gradient border lineargradient css how to set a linear gradient to a border in css how to add a linear-gradient to a border border gradient css3 generator border left gradient css linear gradient to borders adding linear gradinet to border how to add gradient td boarder colour css border gradient and image radial gradient border css how to make a linear gradient border in css set linear gradient fro border border liner-gradient rgb border image css gardient gradient border color property css make border stay on gradient css gradient to replace border border gradient linear gradient border bottom border gradient and background csss gradient brder graient on border fielset border gradient gradient on border border with linear-gradient card border gradient border color degradee how t create a gradient border css gradient border html css add linear gradient to border css gradient for border css border color gradient linear gradient outline images linear graydent outline images image gradient border can you linear gradient a border in css how to give linear gradient to border css Create a clean border gradient css is it possible to to use linear gradient in border how to add gradient in border 2 color gradient css border css linear-gradient makes border css give gradient to border can i create a border linear gradient degrade border css border linear-gradient can you use repeating-linear-gradient on border color border container GRADIENT apply linear gradient to border how to create gradient border in css linearGradient IN CSS BODER add verlauf to border css left border gradient css linear gradien to border css borderradient for border how to give gradient for border gradient borders css how to make GRADIENT BORDER gradient color border css linear gradient on border div border color gradient How to make a black gradient border css can you do a linear gradient for boder css can you pass a gradient to css border css linear gradient to a border gredient border border degradado css css gradient color border linear gradient for border css border around gradient image add gradient to border css border color gradient with radius css div border gradient linera gradient border css border color gradient each side border color in gradient border gradient image css gradent border linear border css background gradient border radius gradient as border css gradient border color gradient border gradient border color css border in gradient css setting linear gradient border gradient in border css border color linear gradient linear gradient border can we apply linear gradient to border right css set border color as gradient gradient css border-bottom border with linear gradient css border with gradient radial-gradient border gradient border around image css css border background gradient border linear gradient border color gradient how to gradient border css how to make a gradient border in css border color gradient css half gradient half white border 5px solid in codepen bordered gradient css create gradient border css border color gradiant css border css with linear gardient border bottom gradient css stroke gradient css in and background image linear gradient css border border line gradient css html border gradient color fading border to card css border linear gradient css generator border gardient css border with gradient css htmlcss fading border image border linear gradient css gradient background border css how to make shadowed boreder css css gradient border generator css linear gradient border css border radial gradient how to make border color gradient in css add gradient to border css border css gradient gradien boder css linear gradient border css css border linear gradient css border gradient generator how to give border gradient in css gradient border css css border gradient border gradient css radius gradient css stoke css gradient outline css gradient border gradient border button css border gradient css

Made with love

Welcome Back!

Sign up to unlock all of IQCode features:

Test your skills and track progress
Engage in comprehensive interactive courses
Commit to daily skill-enhancing challenges
Solve practical, real-world issues
Share your insights and learnings

Create an account

Create a Free Account

Sign up to unlock all of IQCode features:

Test your skills and track progress
Engage in comprehensive interactive courses
Commit to daily skill-enhancing challenges
Solve practical, real-world issues
Share your insights and learnings

Create an account

Creating a new code example