Link Search Menu Expand Document

Use a CSS Linear Gradient to Create a Striped Element

Summary

  • The repeating-linear-gradient() allows a gradient to be repeated.

Final Code

<style>

  div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }

</style>

<div></div>