Creating a Rotating Gradient Border Effect with CSS

Creating a Rotating Gradient Border Effect with CSS

Kevin Powell via YouTube Direct link

- Trying multiple linear gradients

9 of 11

9 of 11

- Trying multiple linear gradients

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Creating a Rotating Gradient Border Effect with CSS

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - Setting things up
  3. 3 - Adding a conic gradient to the div
  4. 4 - Adding a custom property to animate the gradient
  5. 5 - Registering the custom property to animate it
  6. 6 - Moving the gradient to a pseudo-element
  7. 7 - Struggling to add a mask
  8. 8 - Getting the mask to work
  9. 9 - Trying multiple linear gradients
  10. 10 - Figuring out the problem with the trailing comma
  11. 11 - Looking at Ana’s solution which uses border-image

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.