Tag: #CSSgradients

CSS repeating-linear-gradient() Function

Post author By Lena Stanley
Post date August 13, 2021

The CSS repeating-linear-gradient() function repeats linear gradients.

Syntax:

background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2...);

angle – specifies an angle of direction for the gradient (default is 180deg).

side-or-corner – specifies the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.

color-stop1, color-stop2… – color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
  height: 100px;
  position: relative;
  width: 200px;
  background-image: repeating-linear-gradient(yellow, orange 10%, green 20%);
}
</style>
</head>
<body>

<div id="gradient-1"></div>

</body>
</html>

Output:

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-2 {
  height: 100px;
  position: relative;
  width: 200px;
  background-image: repeating-linear-gradient(45deg,yellow,orange 7%,green 10%);
}
</style>
</head>
<body>

<div id="gradient-2"></div>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Gradients

CSS linear-gradient() Function

Tags #CSSgradients, CSS, repeating-linear-gradient()

Web development

CSS radial-gradient() Function

Post author By Lena Stanley
Post date August 13, 2021

The CSS radial-gradient() function settles a radial gradient as the background image.

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape – specifies the shape of the gradient (ellipse (default), circle).

size – specifies the size of the gradient (farthest-corner (default), closest-side, closest-corner, farthest-side).

position – specifies the position of the gradient (center (default)).

start-color, …, last-color – color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(yellow, orange, green);
}
</style>
</head>
<body>

<div id="gradient-1"></div>

</body>
</html>

Output:

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-2 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(yellow 10%, orange 15%, green 55%);
}
</style>
</head>
<body>

<div id="gradient-2"></div>

</body>
</html>

Output:

A radial gradient with differently spaced color stops:

Example3:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-3 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(farthest-side at 60% 55%, yellow 25%, orange 15%, green 55%);
}
</style>
</head>
<body>

<div id="gradient-3"></div>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Gradients

CSS repeating-radial-gradient() Function

CSS linear-gradient() Function

Tags #CSSgradients, CSS, radial-gradient()

Web development

CSS Conic-Gradient

Post author By Lena Stanley
Post date May 15, 2021

A conic (conical) gradient is similar to a radial-gradient. The difference between them is that in the case of radial gradient the color stops
are defined by a length, and in the case of a conic gradient, the color stops are defined with an angle.

Example:

<!doctype html>
<html>
<head>
<style>
.radial-gradient {
  position: relative;
  background-image: radial-gradient(red, green, blue);
  width:200px;
  height: 200px;
  border-radius:50%;
  margin-right:30px;
}

.conic-gradient {
  position: relative;
  background-image: conic-gradient(red, green, blue);
  width:200px;
  height: 200px;
  border-radius:50%;  
}

</style>
</head>
<body>
    <div class="radial-gradient"></div>
    <div class="conic-gradient"></div>
</body>
</html>

Output:

More examples:

Pie Chart:

<!doctype html>
<html>
<head>
<style>
.pie-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient(
     #1a535c 40deg, #ff6b6b 40deg 160deg, #4ecdc4 160deg);
  margin-right: 20px;
}

.pie-chart-border {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient( 
     #1a535c 1deg 60deg, #ff6b6b 60deg 120deg, #4ecdc4 120deg 220deg, #ffe66d 220deg);
  margin-right: 20px;
}

.pie-chart-border:before {
  content:"";
  position: absolute;
  background-color: #fff;
  width:150px;
  height:150px;
  border-radius:50%;
  top:25px;
  left:25px;
}

.pie-chart-four-colors {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius:50%;
  background-image: conic-gradient(#4ecdc4 25%, #1a535c 0 50%, #ffe66d 0 75%, #ff6b6b 0);
}

</style>
</head>
<body>
  <div class="pie-chart"></div>
  <div class="pie-chart-border"></div>
  <div class="pie-chart-four-colors"></div>
</body>
</html>

Checkerboard:

<!doctype html>
<html>
<head>
<style>
.checkerboard {
  position: relative;
  border:7px solid #000;
  width:200px;
  height:200px;
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 43%/45px 50px;
}
</style>
</head>
<body>
  <div class="checkerboard"></div>
</body>
</html>

Output:

Starburst:

<!doctype html>
<html>
<head>
<style>
.starburst {
  position: absolute;
  width:200px;
  height: 200px;
  background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);
}
</style>
</head>
<body>
  <div class="starburst"></div>
</body>
</html>

Output:

Umbrella:

<!doctype html>
<html>
<head>
<style>
.umbrella {
  position: relative;
  width:200px;
  height:200px;
  border-radius:50%;
  background-image:
 conic-gradient(
      #ffe0e9 0deg 20deg, #ffc2d4 20deg 40deg, #ff9ebb 40deg 60deg, #ff7aa2 60deg 80deg, #e05780 80deg 100deg, #b9375e 100deg 120deg, #8a2846 120deg 140deg, #602437 140deg 160deg, #522e38 160deg 180deg, #ffe0e9 180deg 200deg, #ffc2d4 200deg 220deg, #ff9ebb 220deg 240deg, #ff7aa2 240deg 260deg, #e05780 260deg 280deg, #b9375e 280deg 300deg, #8a2846 300deg 320deg, #602437 320deg 340deg, #522e38 340deg 360deg);    
    }     
}
</style>
</head>
<body>
  <div class="umbrella"></div>
</body>
</html>

Output:

Enjoy coding!

CSS radial-gradient() Function

HTML Canvas Gradients

Tags #CSSgradients, conic-gradient, CSS, gradient

Web development

CSS Glowing Gradient Border

Post author By Lena Stanley
Post date March 5, 2021

Demo:

*to see the code on the website click here.

To create the CSS Glowing gradient border follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="gradient">
PURE CSS GLOWING GRADIENT BORDER
  </div>  
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #0b090a;
}

Create the gradient border effect by using the :after or :before pseudo-classes (you can read more about CSS Pseudo-elements here):

.container {
  max-width: 250px;
  padding: 2px;
  position: relative;
  z-index:1;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 
  margin-right:25px;
  filter: brightness(120%);
}

.container:before {
  z-index:-1;
  position: absolute;
  content:"";
  width:230px;
  height:230px;
  left:10px;
  top:0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 
  filter: blur(20px);
  
}

.gradient {
  background-color: #0b090a;
  padding: 30px;
  color: white; 
  font-size: 35px;
  font-family: arial;
  text-align: center;
}

To see the live output of the code go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

CSS Gradient Border

CSS Conic-Gradient

Tags #CSSgradients, border, CSS

Web development

CSS Gradient Border

Post author By Lena Stanley
Post date March 5, 2021

Demo:

*to see the live output of the code on the website click here.

To create the CSS Gradient border follow the steps below and watch the video tutorial:

Step1.

Add HTML

If you want to create square/ rectangle border:

<div class="container">
  <div class="gradient">
Type your text here...
  </div>  
</div>

If you want to create rounded border:

<div class="container-radius">
  <div class="gradient-border-radius">
Type your text here...
  </div>  
</div>

Step2.

Add CSS

Set the colour of the background and the position of the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;  
}

To read more how to create the gradient in CSS click here.

CSS for Square/ Rectangle border:

.container {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;   
  margin-right:25px;
}

.gradient {
  background-color: #fff;
  padding: 2rem;
  color: black;  
}

CSS for Rounded border:

.container-radius {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;
  border-radius: 7%;  
}

.gradient-border-radius {
  background-color: #fff;
  padding: 2rem;
  color: black;
  border-radius: 5%;  
}

CSS gradient borders — *to see the live output on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

CSS Conic-Gradient

Tags #CSSgradients, border, CSS, gradient

Web development

CSS Gradient Text Effect

Post author By Lena Stanley
Post date February 2, 2021

To create the CSS Gradient Text Effect follow the steps below and watch the video tutorial.

Step1.

Add HTML

<div class="text">Type your text here</div>

Step2.

Add CSS

Set the colour and the position of the background and the text:

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style your text:

.text {
  position: relative;
  text-align: center;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
  background-image: linear-gradient( 109.6deg,  rgba(48,207,208,1) 11.2%, rgba(51,8,103,1) 92.5% );
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.85);  
}

To see the live output of the code go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

CSS Gradient Border

CSS Glowing Gradient Border

Tags #CSSgradients, CSS, gradient, HTML