Slanted Text Effect

Look Demo

Add a simple slanted hover effect to any text. This plugin uses css editor and works with all template families.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Slanted Text Effect //

h1:hover {
transform: skewX(-15deg);
transition:transform .3s ease-in-out;
color: #66D796 !important;

h1 {
transition:transform .3s ease-in-out;


Change the h1 header property to the one you are targeting - this can either be h1, h2, or h3. Adjust color and transform angle.

If you’d like to target a specific block, add the block ID before h1. Download Squarespace Collection/Block Identifier to help make finding and copying block IDs easier.


No notes.