monocolor
Get this themeSupport
  • monocolor
  • Changelog
  • Requirements
  • Getting started
    • Theme Installation/Update
    • Translations
    • Recommended plugins to install
      • Atto Editor: Full Screen
      • Atto Editor: Advanced Link
  • Demo Content
    • Demo content
    • Front Page Blocks
      • Show/hide for non-logged in users
      • Blocks Order
      • Block #0 - Default Moodle Front Page Blocks
      • Hero Blocks
        • Block #1 - Hero Slider
        • Block #2 - Video Hero
        • Block #3 - Hero Image
        • Block #4 - Hero Slider #2
      • HTML Blocks
        • Team
          • Block #17.1, #17.2, #17.3
        • Categories List
          • Block #19
        • Logotypes
          • Block #15
        • Testimonials
          • Block #14.1, #14.2, #14.3
        • Content
          • Block #8
          • Content #1
          • Block #16
          • Block #20
        • Grid Content
          • Animated images with the content (5)
          • Grid with Icons (6.1, 6.2)
          • Block #9.1 , #9.2
          • Block #10
          • Block #11
          • Block #12
          • Block #13
        • FAQ
          • Block #18
        • Call to Action
          • Block #21
          • Block #22
      • Advanced Options
        • Additional Classes
        • Custom Block Title
        • Custom CSS field
        • Custom CSS/SCSS for Blocks
        • Gradient Titles
        • Rounded Boxes/Containers
        • Rounded Images
      • Re-usage HTML code snippets
  • UI Kit
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text Modifications
    • Course Layout
      • Standard View
      • Tab Layout
    • Course Formats
    • Paid Courses
  • Theme Settings
    • General
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
    • Top Bar
    • Footer
    • Course Page
    • Google/Custom Fonts and GDPR
  • Custom Enrollment Page
  • More
    • 🕶️Show/hide for non-logged in users
    • 🌑Show/hide on the Dark Mode
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page

Was this helpful?

  1. Demo Content
  2. Front Page Blocks
  3. Advanced Options

Gradient Titles

Learn how to add a gradient to the titles.

PreviousCustom CSS/SCSS for BlocksNextRounded Boxes/Containers

Last updated 2 years ago

Was this helpful?

Sample SCSS code to add

Advanced -> Raw SCSS

.rui-block-title {
    background-image: linear-gradient(140deg,#ffd9cd 13%,#FF3F05 84%);
    color: #FF3F05;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

or

Class to add .rui-text--gradient

Lorem ipsum dolar set
<h2 class="rui-text--gradient">Gradient title</h2>
<p>Lorem ipsum dolar set rest of the content</p>

Custom Block Title