How to Design Sweet Dishes Text Effect With CSS

Namaste ????

Today we’ll learn How to design Sweet Dishes text effect with CSS. In which we are going to use Simple HTML CSS.

Table of Contents

How to Design Sweet Dishes Text Effect With CSS Demo

How to Design Sweet Dishes Text Effect With CSS Source Code

.html file Code

Put this code between <body> Your Code Here </body> tags

<!-- Created by codinghindi.in --->
<div class="copyright">

  <a href="https://www.youtube.com/channel/UC5bkSPKJNRroCEQ7UEeFP3g?sub_confomation=1" target="_blank">Subscribe Now!</a>
</div>
<section class="header">
        <div class="title-wrapper">
            <h1 class="sweet-title">
                <span data-text="sweet">Sweet</span>
                <span data-text="dishes">Dishes</span>
            </h1>
            <span class="top-title"> Get me all the</span>
            <span class="bottom-title"> You can eat</span>
        </div>
</section>

.css file Code

Put this code between <style> Your Code Here </style> tags and put in style.css file

/*-- Created by codinghindi.in ---*/

/* Google Font  */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Montserrat:wght@100&family=Open+Sans&family=Poppins:wght@500&family=Quicksand:wght@300&family=Roboto:wght@100&display=swap");

/*--- Main Body CSS ----*/
body {
    background: #003fa1fb;
    height: 100vh;
    font-family: sans-serif;
    background: linear-gradient(142deg, #3fa1fb 0%, #fc46a8 100%);
}

.header {
    margin: 0 auto;
    max-width: 1200px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh-4rem);
}

.title-wrapper {
    display: grid;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: skew(0, -10deg);
}

.top-title {
    order: 1;
    text-align: center;
    display: block;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-top: 2rem;
    margin-left: 2rem;
}

.bottom-title {
    order: 3;
    text-align: center;
    display: block;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-top: 2rem;
    margin-left: 2rem;
}

.sweet-title {
    order: 2;
    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;
}

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

.sweet-title span: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;
}

.sweet-title span:nth-child(1) {
    padding-right: 2.25rem;
}

.sweet-title span:nth-child(2) {
    padding-left: 2.25rem;
}

.copyright {
  background-color: red;
  padding: 10px;
  text-align: center;
  font-family: "Poppins";
  cursor: pointer;
}

.copyright a {
  text-decoration: none;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}