CSScrafter logo

CSS for Heading Blocks

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%)}
}

Grab Your CSS Styles Here

Get All CSS Items In One Place

If you want to get all CSS items in one place, then visit here. We have added all the items listed there, and you will get all the resources of CSScrafter for free in one place.

All CSS Items In One Place →