There is a great tool to start with. Head over to below link and create your gradient config. You can always modify everything later on.
Add to your site
If you are using a ghost instance, there are two ways
- Add to code injection
- Update the theme css files
Inside the site header code injection box, add a new style tag and just paste the above css directly.
Just remember to change the
css-selector to whichever element you would like to have the effect.
You can always tweak the css properties directly to achieve the desired result. You can also try changing the animation properties to create some wonderful but pretty simple effects.
You can also edit your theme directly if you are using a custom theme. Just add the same css anywhere in the
Create a new zip version of the theme and upload it to your ghost installation.
If your changes are not reflecting
- Try disabling cache in the browser and reloading the page
- Check if the classname you are using is correct
- Check if any other element is not overlapping preventing you to see the effect
- Check in the console if you see any errors. If the
<style>tag has invalid syntax, other css files might not load.