CSS Text Gradient

Css, Gradient color text and text border

Assuming this is the kind of effect you are looking for:

Sample Image

this snippet adds a text-stroke to your CSS.

.card .blur h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(cyan, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px navy;
  text-stroke: 4px navy;
  font-weight: 900;
  font-size: 76px;
}

<div class="card">
  <div class="blur">
    <h3>HEADING</h3>
  </div>
</div>

Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)

Yes, it is.

h1 {  font-size: 72px;   background: -webkit-linear-gradient(left, red , yellow);   background: -o-linear-gradient(right, red, yellow);   background: -moz-linear-gradient(right, red, yellow);   background: linear-gradient(to right, red , yellow);   -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

<h1>Hello World</h1>

CSS Text with Linear Gradient, Shadow and Text Outline?

Try this:

p {  font-size: 100px;  background: linear-gradient(to bottom, red, blue);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-text-stroke: 2px black;  filter: drop-shadow(15px 15px black);}

<p>Some Text</p>

CSS Gradient Text with Opacity and Gradient Text Stroke / Outline

Actually the only way i can think about using CSS and without SVG is to rely on element() combined with mask but still the support is too low:

Here is an example that will only work in Firefox. The trick is to create a text with only stroke and transparent color as a reference that will be used inside a mask of the same text where we have the same stroke to keep only the stroke visible and get the needed effect. Yes, it's a bit crazy as idea but it works.

body {  background: #000000;}h1 {  font-size: 80px;  font-weight: 800;  font-family: arial;  color:#fff;}#ref {  -webkit-text-stroke: 5px red;  color:transparent;  display:inline-block;}h1.grad {  background-image: linear-gradient(to left,      rgba(255, 0, 0, 0.3),      rgba(0, 0, 255, 0.4),      rgba(255, 0, 0, 0.5));  -webkit-text-fill-color: transparent;  -webkit-background-clip: text;  margin: 10px;}h1.grad::after {  content: attr(data-text);}
h1.grad::before {  content: attr(data-text);  background: -webkit-linear-gradient(-180deg, #3399ff, #82ed89, #3399ff);  -webkit-background-clip: text;  -webkit-text-stroke: 5px transparent;  position: absolute;  z-index: -1;  -webkit-mask:element(#ref);          mask:-moz-element(#ref);          mask:element(#ref);}
body {  background:url(https://i.picsum.photos/id/107/1000/1000.jpg) center/cover;}

<h1 data-text="Some Text" class="grad"></h1>

<div style="height:0;overflow:hidden;"><h1 id="ref">Some Text</h1></div>

Font(text) linear-gradient in IE 10. How?

There is no way to make this work in IE10.
Your only options are using an image or svg to create that icon with a gradient.

How to animate text gradient color change in Tailwind?

There is a simple way to achieve what you want, here is how :

1- First go to tailwind.config.js and add this inside extend

 extend: {
      'animation': {
            'text':'text 5s ease infinite',
        },
        'keyframes': {
            'text': {
                '0%, 100%': {
                   'background-size':'200% 200%',
                    'background-position': 'left center'
                },
                '50%': {
                   'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            },
        }
    },

2- Then add these classes to your div :

<div class="text-9xl font-semibold 
            bg-gradient-to-r bg-clip-text  text-transparent 
            from-indigo-500 via-purple-500 to-indigo-500
            animate-text
            ">
      SampleText
</div>

Take a look HERE

css gradient text are not visible on Safari

There is an unresolved, open issue about this on the WebKit Bugzilla since 2017: background-clip:text doesn't work with display:flex. Apple has ignored this bug for 4 years, it will probably never be resolved.

Remove display: flex and it works:

.gradient-effect {
  background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
  -webkit-text-fill-color: transparent;
  width: max-content;
  background-clip: text;
  -webkit-background-clip: text;
}

.mine-box-title {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
}

<h2 class="mine-box-title gradient-effect">25 MILLION</h2>