Universe Moodle Theme
Demo Get this theme
  • Universe
  • Changelog
    • 1.1.0 - June 20, 2023
    • 1.0.0 - May 30, 2023
  • Requirements
  • Getting started
    • Theme Installation/Update
    • Translations
    • Recommended plugins to install
      • Atto Editor: Full Screen
      • Atto Editor: Advanced Link
    • Global Styles
      • UI Elements
      • Typography
    • RTL Interface
    • Paid Courses
    • Course Filter
  • Demo Content
    • Demo content
    • Front Page Blocks
      • Hero Blocks
        • Block #1 - Hero Slider
        • Block #2 - Video Hero
        • Block #3 - Hero Image
        • Block #4 - Hero Slider #2
      • HTML Blocks
        • Block #5
        • Block #6.1, 6.2
        • Block #7
        • Block #8
        • Block #9.1 , #9.2
        • Block #10
        • Block #11
        • Block #12
        • Block #13
        • Block #14.1, #14.2, #14.3
        • Block #15
        • Block #16
        • Block #17.1, #17.2, #17.3
        • Block #18
        • Block #19
        • Block #20
        • 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
    • Front Page Block #0
    • 🎨Course Colors
    • Custom Enrollment Page
    • User roles
  • UI Kit
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text Modifications
    • Course Layout
      • Standard View
      • Tab Layout
    • Course Page
      • Default Moodle Course List
    • Course Formats
    • Paid Courses
  • Theme Settings
    • General
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
    • Top Bar
    • Footer
      • Default Moodle Footer Links
    • Google/Custom Fonts and GDPR
  • 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