【HTML/CSS】コピペでできるお洒落な文字デザインまとめ

<p class="t8-textlogo-1">サンプル</p>

.t8-textlogo-1{
    font-size: 3em;
    font-weight: bold;
}

<p class="t8-textlogo-2">サンプル</p>

.t8-textlogo-2{
    font-size: 3em;
    font-weight: bold;
    text-align: center;
}

<p class="t8-textlogo-3">サンプル</p>

.t8-textlogo-3{
 	font-size:3em;
	line-height:1em;
	font-weight: bold;
	text-shadow:0 0.1em 0 #808080;
}

<p class="t8-textlogo-4"><span>サンプル</span></p>

.t8-textlogo-4 span{
    font-size: 3em;
    font-weight: bold;

   	text-shadow: 
		0 0 0.05em #0d6efd,
		0 0 0.10em #0d6efd,
		0 0 0.15em #0d6efd,
		0 0 0.30em #0d6efd;
	
}

<p class="t8-textlogo-5">サンプル</p>

.t8-textlogo-5{
 	font-size:3em;
	line-height:1em;
	font-weight: bold;
	color: #0d6efd;
	text-shadow:0 0.1em 0 blue;
}

<p class="t8-textlogo-6" data-text="サンプル">サンプル</p>

.t8-textlogo-6{
    font-size: 3em;
    font-weight: bold;
　　-webkit-text-stroke: 3px #0d6efd;
}

.t8-textlogo-6::before {
	content: attr(data-text);
	position: absolute;
	color: #0d6efd;
	-webkit-text-stroke: 1px #FFF;
}

<p class="t8-textlogo-7">サンプル</p>

.t8-textlogo-7{
    font-size: 3em;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    line-height:1em;
    -webkit-background-clip: text;
    -webkit-box-reflect: below -0.25em -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .6)), to(transparent));
}

<p class="t8-textlogo-8">サンプル</p>

.t8-textlogo-8{
    font-size: 3em;
    font-weight: bold;
    line-height:1em;
    letter-spacing: 0.05em;
    color: transparent;
    -webkit-text-stroke: 0.01em rgba(0,0,0,1);
}

<p class="t8-textlogo-9">サンプル</p>

.t8-textlogo-9{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: linear-gradient( 0deg, blue 0% 60% , #0d6efd 60% 100%);
-webkit-background-clip: text;
}

<p class="t8-textlogo-10">サンプル</p>

.t8-textlogo-10{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: linear-gradient( -90deg, blue 0% 70% , #0d6efd 70% 100%);
-webkit-background-clip: text;
}

<p class="t8-textlogo-10a">サンプル</p>

.t8-textlogo-10a{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: linear-gradient( -45deg, blue 0% 70% , #0d6efd 70% 100%);
-webkit-background-clip: text;
}

<p class="t8-textlogo-11">サンプル</p>

.t8-textlogo-11{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: repeating-linear-gradient( 90deg, blue 0 0.1em, #0d6efd 0.1em 0.2em );
  -webkit-background-clip: text;
}

<p class="t8-textlogo-12">サンプル</p>

.t8-textlogo-12{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: repeating-linear-gradient( 0deg, blue 0 0.1em, #0d6efd 0.1em 0.2em );
    -webkit-background-clip: text;
}

<p class="t8-textlogo-13">サンプル</p>

.t8-textlogo-13{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: repeating-linear-gradient( 45deg, blue 0 0.1em, #0d6efd 0.1em 0.2em );
    -webkit-background-clip: text;  
}

<p class="t8-textlogo-14">サンプル</p>

.t8-textlogo-14{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-image:
    radial-gradient(#0d6efd 30%, transparent 30%);
    background-color: blue;
    background-size: 15px 15px;
    background-position: 0 0, 10px 10px;
  -webkit-background-clip: text;
}

<p class="t8-textlogo-15">サンプル</p>

.t8-textlogo-15{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-image:
    radial-gradient(#0d6efd 70%, transparent 70%);
    background-color: blue;
    background-size: 15px 15px;
    background-position: 0 0, 10px 10px;
  -webkit-background-clip: text;
}

<p class="t8-textlogo-16">サンプル</p>

.t8-textlogo-16{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(45deg, #0d6efd 25%, transparent 25%, transparent 75%, #0d6efd 75%),
    linear-gradient(45deg, #0d6efd 25%, transparent 25%, transparent 75%, #0d6efd 75%);
    background-color: blue;
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    -webkit-background-clip: text;  -webkit-background-clip: text;
}

<p class="t8-textlogo-17">サンプル</p>

.t8-textlogo-17{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-color : #0d6efd;
    background-image:
    repeating-linear-gradient( 0deg,rgba(0, 0, 0, 0.5) 0px 10px,	transparent 10px 30px),
    repeating-linear-gradient( 90deg,rgba(0, 0, 0, 0.5) 0px 10px,	transparent 10px 30px);
    -webkit-background-clip: text;
}

<p class="t8-textlogo-18">サンプル</p>

.t8-textlogo-18{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-color : #0d6efd;
    background-image: repeating-linear-gradient( 45deg,rgba(0, 0, 0, 0.5) 0px 10px,	
    transparent 10px 30px),
    repeating-linear-gradient( -45deg,rgba(0, 0, 0, 0.5) 0px 10px,	
    transparent 10px 30px);
    -webkit-background-clip: text;
}

<p class="t8-textlogo-19">サンプル</p>

.t8-textlogo-19{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-color : #0d6efd;
    background: -webkit-linear-gradient(to top, transnparent, #0d6efd);
    background: linear-gradient(to top, transparent, #0d6efd);
    -webkit-background-clip: text;
}

<p class="t8-textlogo-20">サンプル</p>

.t8-textlogo-20{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-color : #0d6efd;
    background: -webkit-linear-gradient(to right, #0d6efd, transparent);
    background: linear-gradient(to right, #0d6efd, transparent);
    -webkit-background-clip: text;
}

<p class="t8-textlogo-21">サンプル</p>

.t8-textlogo-21{
    font-size: 3em;
    font-weight: bold;
    color: transparent;
    background-color : #0d6efd;
    background-image: url(http://temp8.plat4.net/wp- 
    content/uploads/2023/09/Ciri_staroceanoverlayelectricfairyidolgirl4k_aad1e0c6-cf24-400c-9ac4- fd87a2350a99.png);
    background-size: contain;  
    -webkit-background-clip: text;
}