Categories
CSS Web development

CSS Conic-Gradient

CSS Conic gradient

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:

CSS conic-gradient

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>
pie chart conic gradient

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:

CSS starburst

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:

CSS Conic gradient

Enjoy coding!

Read also:

How to create a gradient border using a CSS conic gradient?

CSS radial-gradient() Function

HTML Canvas Gradients

Categories
CSS Web development

CSS Gradient Border

CSS Gradient Border

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!

Read also:

How to create a gradient border using a CSS conic gradient?

CSS Conic-Gradient

Categories
Web development

CSS Gradient Text Effect

CSS gradient text effect
*to see the live output of the code below click here.

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!

Read also:

CSS Slide Text Animation/ Slide Effect

CSS Gradient Border

CSS Glowing Gradient Border

Categories
Photoshop

How to create the Gradient Text Effect in Photoshop?

To create the Gradient Text Effect in Photoshop follow the steps below and/or watch the video tutorial.

gradient text effect photoshop

Step1.

Create a new document. Set the colour of your background layer and type your text.

gradient text effect photoshop

Step2.

Right-click on the text layer and select the Blending Options.

gradient text effect

Go to Gradient Overlay:

gradient text effect

You can see your text with the gradient effect now:

gradient effect

In Gradient Overlay panel you can choose the already existing gradient or create a new one in the Gradient Editor.

gradient text
gradient text effect

Step3.

Select or choose new colours and create a new gradient.

text effect photoshop

To create the gradient below I used three colours: #72a862, #2af598 and #05747b:

Watch also the video tutorial:

Read also:

How to create an Easter Egg in Photoshop?

How to create Bubbles in Photoshop?

How to make an animated GIF in Photoshop?