Gradient

Chap shortcodes allow to create gradient background colors or gradient text colors by using the gradient and text-gradient shortcode attributes.

Linear gradient

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<segment big padded inverted gradient="135deg, #1E73BE 0%, #8224E3 100%">
  <lorem>
</segment>
Notes
Gradient attribute can consist of values for a CSS linear-gradient.
Radial gradient

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<segment big padded inverted gradient="radial-gradient(#504ec5 25%, #130CB7 75%)">
  <lorem>
</segment>
Notes
Gradient attribute can consist of a custom CSS gradient function.
Text gradient
Huge header
Account Settings
Lorem ipsum color sit amet
<header huge display text-gradient="135deg, #65FDF0 10%, #1D6FA3 100%">Huge header</header>
<header huge icon text-gradient="135deg, #FF6FD8 10%, #3813C2 100%">
  <icon settings text-gradient="135deg, #FF6FD8 10%, #3813C2 100%" />
  Account Settings
</header>
<subheader tiny display text-gradient="135deg, #FD6E6A 10%, #FFC600 100%">Lorem ipsum color sit amet</subheader>
Notes
Text color can be a gradient by using the text-gradient attribute.
Shortcode demo

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<segment big center aligned text-gradient="radial-gradient(#F761A1 0%, #8C1BAB 100%)">
  <lorem short>
</segment>
Icons with text gradient
<icon massive home text-gradient="19deg, #21D4FD 0%, #B721FF 100%">
<icon massive cloud text-gradient="90deg, #FAD961 0%, #F76B1C 100%">
<icon massive open envelope text-gradient="45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%">
<icon massive theme text-gradient="135deg, #8BC6EC 0%, #9599E2 100%">
<icon massive users text-gradient="43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%">
Button with gradient
<button massive fade animated twitter hover="Follow" gradient="135deg, #6eb4e8 0%, #2fa6ff 100%">
  <icon twitter>
  Twitter
</button>
Check out coolhue for handpicked Gradient Hues.

Leave a comment

Your email address will not be published. Required fields are marked *