Intro Gradient

Page Intro Gradient

The page intro plugin allows you to add an image, color or gradient as an introduction at the top of the page. The intro can display behind- or below the menu, at any height, and you can include page context items. In this example, we have set a gradient to display at 300px height, below the menu.

Simply add gradients directly to the source field in your page › plugins › page intro plugin. Read more about CSS3 gradients here and here. * Add CSS gradients without browser prefixes!

Options

Source
Set the source of the intro as either an image, gradient or solid color.

Show in Intro
Choose to show title, description and content within the intro area.

Height
Set the height of the intro area in px or %. If disabled, height will automatically adjust to size of image. You should always use a height for gradients, colors and repeating background patterns.

Fixed
Creates a cool effect where the background image remains fixed when scrolling.

Overlay Menu
When enabled, menu will overlay the intro, which is attached to top of page. When disabled, the intro is attached below the menu.

A few gradient examples

radial-gradient(ellipse farthest-corner at 50% 100%, #78a642, #273716 100%)

radial-gradient(circle, gold, darkorange)

radial-gradient(ellipse closest-side, gold, darkorange)

radial-gradient(circle,salmon,brown)

repeating-linear-gradient(gold 0px, darkorange 1px)

repeating-linear-gradient(#AAA 0px, transparent 1px)

radial-gradient(closest-side, rgba(255,215,0,1), transparent), repeating-linear-gradient(gold 0px, darkorange 1px)

linear-gradient(45deg, red, orange, yellow)

radial-gradient(circle farthest-side, gold, gold 50px, transparent), repeating-linear-gradient(-45deg, gold, gold 5px, darkorange 5px, darkorange 10px)

background-image:repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px)

linear-gradient(to right,#FB2B69 ,#FF5B37 100%)

linear-gradient(45deg, hsla(280, 96%, 48%, 1) 0%, hsla(280, 96%, 48%, 0) 70%), linear-gradient(135deg, hsla(319, 91%, 42%, 1) 10%, hsla(319, 91%, 42%, 0) 80%), linear-gradient(225deg, hsla(17, 100%, 50%, 1) 10%, hsla(17, 100%, 50%, 0) 80%), linear-gradient(315deg, hsla(64, 96%, 41%, 1) 100%, hsla(64, 96%, 41%, 0) 70%)

linear-gradient(45deg, #555351 0%, #555351 5%, #8d7b6c 40%, #cc9d7a 70%, #fff9aa 100%)

linear-gradient(135deg, #325571 0%, #8e9fa4 38%, #decab2 66%, #f2d580 78%, #ffa642 100%)

linear-gradient(to left, #C02425 , #F0CB35)

Tip! Gradients can also be used in the background-plugin!

CSS Gradient Resources

https://css-tricks.com/css3-gradients
http://www.hongkiat.com/blog/css3-linear-gradient
http://www.webcore-it.com/colorful-background
http://angrytools.com/gradient
http://uigradients.com
http://codepen.io/tumanova/pen/tkvmi?editors=0100