Graphic Design Classes Online

Gradiant css

Linear gradients Css
.gradiant{
  height: 250px;
  background-color: #ff8a00;
  background-image: linear-gradient(#ff8a00, #e52e71);
}

Linear gradients HTML

<div class="gradient"></div>

Linear gradients View

Graphic Design Classes Online

Radial gradients Css

.rgradiant{
  height: 250px;
  background-color: #ff8a00;
  background-image: radial-gradient(#ff8a00, #e52e71);
}

Radial gradients HTML

<div class="rgradient"></div>

Radial gradients View

Graphic Design Classes Online

Conic gradients Css

.coingradient {
  height: 250px;
  background-color: #ff8a00;
  background-image: conic-gradient(#ff8a00, #e52e71);
}

Conic gradients HTML

<div class=”coingradient”></div>

Conic gradients view

Graphic Design Classes Online

Repeating gradients Css

.repeating-gradient {
  height: 250px;
  background-color: #ff8a00;
  background-image: repeating-linear-gradient(
    45deg,
    #ff8a00,
    #ff8a00 10px,
    #e52e71 10px,
    #e52e71 20px /* determines size */
  );
}

Repeating gradients HTML

<div class="repeating-gradient"></div>

Repeating gradients view

Graphic Design Classes Online

If you want to join my online or offline graphic designing course than just call me - 9334029817

Related Posts

Leave a Reply