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
Lorem ipsum color sit amet
<header huge display text-gradient="135deg, #65FDF0 10%, #1D6FA3 100%">Huge header</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>
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.