CSS Gradient Text in Firefox

Developer
Giana
Size
3,158 Kb
Views
68,816
  1. CSS Gradient Text in Firefox Previews
  2. CSS Gradient Text in Firefox HTML Codes
  3. CSS Gradient Text in Firefox CSS Codes

How do I make an css gradient text in firefox?

Firefox (& Webkit)-compatible gradient text using CSS blend modes. Looking for ways to simplify.Edit: As of November 2015, this is broken in the latest versions of Chrome. Was working before and will be fixed in some future version.. What is a css gradient text in firefox? How do you make a css gradient text in firefox? This script and codes were developed by Giana on 12 June 2022, Sunday.

CSS Gradient Text in Firefox Previews
IQ Test

CSS Gradient Text in Firefox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Gradient Text in Firefox</title> <link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="light"> <h1 class="gradient1">CSS Gradient Text</h1> <p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</section>
<section class="dark"> <h1 class="gradient1">CSS Gradient Text</h1> <p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</section>
</body>
</html>

CSS Gradient Text in Firefox - Script Codes CSS Codes

section.light { background: #eee;
}
@supports (mix-blend-mode: lighten) { section.light .gradient1 { display: inline-block; position: relative; color: #000; background: #fff; mix-blend-mode: multiply; } section.light .gradient1::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-linear-gradient(left,#23966c, #faaa54, #e23b4a, #db0768, #360670); background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; } section.light .gradient1::before { mix-blend-mode: screen; }
}
@supports (mix-blend-mode: lighten) { section.light .gradient2 { display: inline-block; position: relative; color: #000; background: #fff; mix-blend-mode: multiply; } section.light .gradient2::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670); background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; } section.light .gradient2::before { mix-blend-mode: screen; }
}
section.dark { background: #222;
}
section.dark .gradient1 { color: #fff;
}
@supports (mix-blend-mode: lighten) { section.dark .gradient1 { display: inline-block; position: relative; color: #fff; background: #000; mix-blend-mode: lighten; } section.dark .gradient1::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-linear-gradient(left,#23966c, #faaa54, #e23b4a, #db0768, #360670); background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; } section.dark .gradient1::before { mix-blend-mode: multiply; }
}
section.dark .gradient2 { color: #fff;
}
@supports (mix-blend-mode: lighten) { section.dark .gradient2 { display: inline-block; position: relative; color: #fff; background: #000; mix-blend-mode: lighten; } section.dark .gradient2::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670); background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; } section.dark .gradient2::before { mix-blend-mode: multiply; }
}
/* Page styling, ignore */
body { margin: 0; font-family: "Lato", sans-serif; text-align: center;
}
section { min-height: 50vh; padding: 2em;
}
.gradient1 { font-size: 96px; margin: 0.5em; opacity: 0.9;
}
.gradient2 { text-align: center; margin: 1em auto; width: 10em;
}
CSS Gradient Text in Firefox - Script Codes
CSS Gradient Text in Firefox - Script Codes
Home Page Home
Developer Giana
Username giana
Uploaded June 12, 2022
Rating 4.5
Size 3,158 Kb
Views 68,816
Do you need developer help for CSS Gradient Text in Firefox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Giana (giana) Script Codes
Name
Random Color Palette Generator
CSS box shadow particles
JavaScript calculator
CSS box shadow particles v3
CSS arrow buttons
Fading text with CSS blend modes
Sass button border hover effect mixin
CSS Border transitions
Spinning
HTML 5 Video Player
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!