Get all the CSS styles for your Heading Blocks. No JS for animated headings. Pure CSS animations.

Sliced Heading Style –

Sliced

Sliced

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:group {"backgroundColor":"custom-dark-neviblue","className":"ticss-02b02b1d","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"},"hasCustomCSS":true,"customCSS":"\n:root {\n  \u002d\u002dtext-color: hsl(0, 0%, 100%);\n}\n.sliced-wrapper {\n    display: grid;\n  place-content: center;\n\n  font-family: \u0022Oswald\u0022, sans-serif;\n  font-size: clamp(1.5rem, 1rem + 18vw, 15rem);\n  font-weight: 700;\n  text-transform: uppercase;\n  color: var(\u002d\u002dtext-color);\n}\n.sliced-wrapper {\n  grid-area: 1/1/-1/-1;\n}"} -->
<div id="sliced-wrapper" class="wp-block-group ticss-02b02b1d has-custom-dark-neviblue-background-color has-background"><!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"button","className":"top ticss-42b56546","hasCustomCSS":true,"customCSS":".top {\n  clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);\n  margin-bottom:-115.5px!important;\n}\n"} -->
<h2 class="wp-block-heading has-text-align-center top ticss-42b56546 has-button-color has-text-color" id="sliced" style="font-size:70px;text-transform:uppercase">Sliced</h2>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"}},"className":"bottom ticss-b77f34cb","hasCustomCSS":true,"customCSS":".bottom {\n  clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);\n  color: transparent;\n  background: -webkit- linear-gradient(180deg, rgba(3,0,0,1) 11%, rgba(255,255,255,1) 49%);\n  background:  linear-gradient(180deg, rgba(3,0,0,1) 11%, rgba(255,255,255,1) 49%);;\n  background-clip: text;\n  -webkit-background-clip: text;\n  transform: translateX(-0.03em);\n \n}\n"} -->
<h2 class="wp-block-heading has-text-align-center bottom ticss-b77f34cb" id="sliced" style="font-size:70px;text-transform:uppercase">Sliced</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

You will need Block CSS plugin by Themeisle to get the exact block syle.

If you need only the CSS code here it is ↓

/*Stack/container CSS - */

.sliced-wrapper {
    display: grid;
  place-content: center;

  font-family: "Oswald", sans-serif;
  font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-color);
}

/* Top Heading CSS - */
.top {
  clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
  margin-bottom:-115.5px!important;
}
/* Bottom Heading CSS - */
.bottom {
  clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
  color: transparent;
  background: -webkit- linear-gradient(180deg, rgba(3,0,0,1) 11%, rgba(255,255,255,1) 49%);
  background:  linear-gradient(180deg, rgba(3,0,0,1) 11%, rgba(255,255,255,1) 49%);;
  background-clip: text;
  -webkit-background-clip: text;
  transform: translateX(-0.03em);
 
}

Changing Gradient Heading Style on Scroll –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"},"layout":{"selfStretch":"fit","flexSize":null},"color":{"text":"#cfcfcf00"}},"className":"gradient-heading texture1 ticss-42b56546","hasCustomCSS":true,"customCSS":"\n.gradient-heading {\n    position: block;\n  margin: 11px;\n  color: transparent;\n      background: black;\n  color: white;\n  background-size: cover;\n  background-clip: text;\n  -webkit-background-clip: text;\n\n}\n.texture1,\n.texture1::after {\n  position: absolute;\n  left: 0;\n  top: 20;\n  width: 100%;\n  height: 100%;\n}\n  \n.texture1 {\n  background-image: linear-gradient(to bottom, blue, white 50%, red 65%, white);\n  background-attachment: fixed;\nmix-blend-mode: color-dodge;\n}\n\n.texture1::after {\n  content: '';\n  background-size: cover;\n  filter: saturate(0) brightness(0.8) contrast(4);\n  mix-blend-mode: multiply;\n}\n"} -->
<h2 class="wp-block-heading has-text-align-center gradient-heading texture1 ticss-42b56546 has-text-color" id="heading" style="color:#cfcfcf00;font-size:70px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block syle.

If you need only the CSS code here it is ↓


.gradient-heading {
    position: relative;
  margin: 11px auto;
  color: transparent;
      background: black;
  color: white;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;

}
.texture1,
.texture1::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
  
.texture1 {
  background-image: linear-gradient(to bottom, blue, white 50%, red 65%, white);
  background-attachment: fixed;
mix-blend-mode: color-dodge;
}

.texture1::after {
  content: '';
  background-size: cover;
  filter: saturate(0) brightness(0.8) contrast(4);
  mix-blend-mode: multiply;
}

Underline on Hover Heading Style –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"64px"}},"className":"heading-animation ticss-775d4d5f","hasCustomCSS":true,"customCSS":".heading-animation {\n    font-size: 5rem;\n  cursor: pointer;\n   \u002d\u002ds: 0.1em;   /* the thickness of the line */\n  \u002d\u002dc: #2c4bff; /* the color */\n  \n  color: #0000;\n  padding-bottom: var(\u002d\u002ds);\n  background: \n    linear-gradient(90deg,var(\u002d\u002dc) 50%,#000 0) calc(100% - var(\u002d\u002d_p,0%))/200% 100%,\n    linear-gradient(var(\u002d\u002dc) 0 0) 0% 100%/var(\u002d\u002d_p,0%) var(\u002d\u002ds) no-repeat;\n  -webkit-background-clip: text,padding-box;\n          background-clip: text,padding-box;\n  transition: 0.5s;\n}\n.heading-animation:hover {\u002d\u002d_p: 100%}"} -->
<h2 class="wp-block-heading has-text-align-center heading-animation ticss-775d4d5f" id="heading-1" style="font-size:64px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.heading-animation {
    font-size: 5rem;
  cursor: pointer;
   --s: 0.1em;   /* the thickness of the line */
  --c: #2c4bff; /* the color */
  
  color: #0000;
  padding-bottom: var(--s);
  background: 
    linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,
    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: 0.5s;
}
.heading-animation:hover {--_p: 100%}

Yellow Shade on Heading Hover –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"}},"className":"ticss-98071ac5 hover-yello-bar","hasCustomCSS":true,"customCSS":".hover-yello-bar {\n  font-family: 'Bebas Neue', cursive;\n  font-size: 3em;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%,-50%);\n  background-image: linear-gradient(gold, gold);\n  background-size: 100% 10px;\n  background-repeat: no-repeat;\n  background-position: 100% 0%;\n   transition: background-size .7s, background-position .5s ease-in-out;\n}\n\n.hover-yello-bar:hover {\n  background-size: 100% 100%;\n  background-position: 0% 100%;\n  transition: background-position .7s, background-size .5s ease-in-out;\n}\n"} -->
<h2 class="wp-block-heading has-text-align-center ticss-98071ac5 hover-yello-bar" id="heading-2" style="font-size:70px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.hover-yello-bar {
  font-family: 'Bebas Neue', cursive;
  font-size: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(gold, gold);
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: 100% 0%;
   transition: background-size .7s, background-position .5s ease-in-out;
}

.hover-yello-bar:hover {
  background-size: 100% 100%;
  background-position: 0% 100%;
  transition: background-position .7s, background-size .5s ease-in-out;
}

Light Blue Gradient Shadow Heading Style –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"}},"textColor":"contrastcolor","className":"sweet-title ticss-58efc629","fontFamily":"source-serif-pro","hasCustomCSS":true,"customCSS":".sweet-title {\n  color: #fde9ff;\n  font-weight: 900;\n  text-transform: uppercase;\n  font-size: clamp(3rem, 10vw, 6rem);\n  line-height: 0.75em;\n  text-align: center;\n  text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff,\n    3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb,\n    6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff,\n    6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb,\n    9px 7px 1px #4af7ff;\n              -webkit-text-stroke-width: 2px;\n            -webkit-text-stroke-color: black;\n\n.sweet-title {\n    display: block;\n    position: relative;\n\n    \u0026:before {\n      content: attr(data-text);\n      position: absolute;\n      text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9,\n        -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;\n      z-index: 1;\n    }\n\n    \u0026:nth-child(1) {\n      padding-right: 2.25rem;\n    }\n\n    \u0026:nth-child(2) {\n      padding-left: 2.25rem;\n    }\n  }\n}"} -->
<h2 class="wp-block-heading has-text-align-center sweet-title ticss-58efc629 has-contrastcolor-color has-text-color has-source-serif-pro-font-family" id="heading-3" style="font-size:70px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.sweet-title {
  color: #fde9ff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.75em;
  text-align: center;
  text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff,
    3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb,
    6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff,
    6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb,
    9px 7px 1px #4af7ff;
              -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: black;

.sweet-title {
    display: block;
    position: relative;

    &:before {
      content: attr(data-text);
      position: absolute;
      text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9,
        -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
      z-index: 1;
    }

    &:nth-child(1) {
      padding-right: 2.25rem;
    }

    &:nth-child(2) {
      padding-left: 2.25rem;
    }
  }
}

Button Arounder on Hover –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"48px","textTransform":"uppercase"}},"backgroundColor":"button","textColor":"basecolor","className":"ticss-aeccf9a8 rise","hasCustomCSS":true,"customCSS":".rise {\n\ttext-shadow: -0.01em -0.01em 0.01em #000;\n\tanimation: rise 2s ease-in-out 0.5s forwards;\n}\n\n@keyframes rise {\n\tto {\n\t\ttext-shadow: 0em 0.01em #ff5, 0em 0.02em #ff5, 0em 0.02em 0.03em #ff5,\n\t\t\t-0.01em 0.01em #333, -0.02em 0.02em #333, -0.03em 0.03em #333,\n\t\t\t-0.04em 0.04em #333, -0.01em -0.01em 0.03em #000, -0.02em -0.02em 0.03em #000,\n\t\t\t-0.03em -0.03em 0.03em #000;\n\t\ttransform: translateY(-0.025em) translateX(0.04em);\n\t}\n}"} -->
<h2 class="wp-block-heading has-text-align-center ticss-aeccf9a8 rise has-basecolor-color has-button-background-color has-text-color has-background" id="heading-4" style="font-size:48px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block syle.

If you need only the CSS code here it is ↓

.rise {
	text-shadow: -0.01em -0.01em 0.01em #000;
	animation: rise 2s ease-in-out 0.5s forwards;
}

@keyframes rise {
	to {
		text-shadow: 0em 0.01em #ff5, 0em 0.02em #ff5, 0em 0.02em 0.03em #ff5,
			-0.01em 0.01em #333, -0.02em 0.02em #333, -0.03em 0.03em #333,
			-0.04em 0.04em #333, -0.01em -0.01em 0.03em #000, -0.02em -0.02em 0.03em #000,
			-0.03em -0.03em 0.03em #000;
		transform: translateY(-0.025em) translateX(0.04em);
	}
}

Multi Gradient Heading Style –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"}},"className":"double-bg-heading ticss-a8cb94d6","hasCustomCSS":true,"customCSS":".double-bg-heading {\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  background-image: linear-gradient(305deg, tomato, gold, cyan);\n }\n\n\n\n"} -->
<h2 class="wp-block-heading has-text-align-center double-bg-heading ticss-a8cb94d6" id="heading-5" style="font-size:70px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block syle.

If you need only the CSS code here it is ↓

.double-bg-heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(305deg, tomato, gold, cyan);
 }



Gradient Stroke Heading Style –

Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontSize":"70px"}},"className":"ticss-d0e0573c gradient-stroke","hasCustomCSS":true,"customCSS":"\n\n.gradient-stroke {\n    background: -webkit-linear-gradient(7deg, #09f1b8, #00a2ff, #ff00d2, #fed90f);\n  -webkit-background-clip: text;\n  -webkit-text-stroke: 6px transparent;\n  color: #232d2d;\n  letter-spacing: calc(1em / 5);\n}\n"} -->
<h2 class="wp-block-heading has-text-align-center ticss-d0e0573c gradient-stroke" id="heading-6" style="font-size:70px;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block syle.

If you need only the CSS code here it is ↓



.gradient-stroke {
    background: -webkit-linear-gradient(7deg, #09f1b8, #00a2ff, #ff00d2, #fed90f);
  -webkit-background-clip: text;
  -webkit-text-stroke: 6px transparent;
  color: #232d2d;
  letter-spacing: calc(1em / 5);
}

Animated Gradient Heading Style –

Heading Text

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"capitalize","fontSize":"65px"}},"className":"ticss-285f8adc multicolor-animated-heading","hasCustomCSS":true,"customCSS":".multicolor-animated-heading {\t\tcolor: #fff;\n\t\tbackground: linear-gradient(to right,#095fab 10%, #25abe8 50%, #57d75b 60%);\n\t\tbackground-size: auto auto;\n\t\tbackground-clip: border-box;\n\t\tbackground-size: 200% auto;\n\t\tcolor: #fff;\n\t\tbackground-clip: text;\n\t\ttext-fill-color: transparent;\n\t\t-webkit-background-clip: text;\n\t\t-webkit-text-fill-color: transparent;\n\t\tanimation: textclip 1.5s linear infinite;\n\t}\n\n@keyframes textclip {\n\tto {\n\t\tbackground-position: 200% center;\n\t}\n}"} -->
<h2 class="wp-block-heading has-text-align-center ticss-285f8adc multicolor-animated-heading" id="heading-text-1" style="font-size:65px;text-transform:capitalize">Heading Text</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.multicolor-animated-heading {		color: #fff;
		background: linear-gradient(to right,#095fab 10%, #25abe8 50%, #57d75b 60%);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color: #fff;
		background-clip: text;
		text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textclip 1.5s linear infinite;
	}

@keyframes textclip {
	to {
		background-position: 200% center;
	}
}

Revealing the Heading Animation Style –

Revealing Heading

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"50px"}},"textColor":"button","className":"ticss-93bb510d revealing-heading","hasCustomCSS":true,"customCSS":".revealing-heading{\n   position: relative;\n    overflow: hidden;\n    display: block;\n    line-height: 1.2;\n}\n.revealing-heading::after{\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: white;\n    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;\n    transform: translateX(-101%);\n}\n.revealing-heading::before{\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    background: #0a1020;\n    animation: a-ltr-before 8s cubic-bezier(.77,0,.18,1) forwards;\n    transform: translateX(0);\n}\n.revealing-heading:nth-of-type(1)::before,\n.revealing-heading:nth-of-type(1) ::after{\n    animation-delay: 1s;\n  animation-iteration-count: infinite;\n}\n@keyframes a-ltr-after{\n    0% {transform: translateX(-100%)}\n    100% {transform: translateX(101%)}\n}\n\n@keyframes a-ltr-before{\n    0% {transform: translateX(0)}\n    100% {transform: translateX(200%)}\n}"} -->
<h2 class="wp-block-heading has-text-align-center ticss-93bb510d revealing-heading has-button-color has-text-color" id="revealing-heading" style="font-size:50px">Revealing Heading</h2>
<!-- /wp:heading -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.revealing-heading{
   position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
}
.revealing-heading::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}
.revealing-heading::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #0a1020;
    animation: a-ltr-before 8s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}
.revealing-heading:nth-of-type(1)::before,
.revealing-heading:nth-of-type(1) ::after{
    animation-delay: 1s;
  animation-iteration-count: infinite;
}
@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}