1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5 <title>Online CSS Code Generator</title> 6 <meta name="description" content="CSS code generator online. CSS button, speech bubble, triangle, 3D text, text stroke, text shadow, box shadow, gradient colors"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="shortcut icon" href="/favicon.svg"> 9 <link rel="apple-touch-icon" href="/images/meta/apple-touch-icon.png"> 10<meta property="og:type" content="website"> 11 <meta property="og:title" content="Online CSS Code Generator"> 12 <meta property="og:site_name" content="HTML Code Generator"> 13 <meta property="og:image" content="https://www.html-code-generator.com/images/HTMLpicture.png"> 14 <meta property="og:url" content="https://www.html-code-generator.com/css/"> 15 <meta property="og:description" content="CSS code generator online. CSS button, speech bubble, triangle, 3D text, text stroke, text shadow, box shadow, gradient colors"> 16 <meta property="og:image:alt" content="HTML Code Generator"> 17 <meta name="twitter:card" content="summary"> 18 <meta name="twitter:title" content="Online CSS Code Generator"> 19 <meta name="twitter:description" content="CSS code generator online. CSS button, speech bubble, triangle, 3D text, text stroke, text shadow, box shadow, gradient colors"> 20 <meta name="twitter:image" content="https://www.html-code-generator.com/images/HTMLpicture.png"> 21 <meta name="twitter:site" content="@HTMLgenerator"> 22 <meta property="fb:app_id" content="1450933971613743"> 23 <link rel="canonical" href="https://www.html-code-generator.com/css/">
24<script>const pcid=0; var adb=0, hcgdark=0,hcg_glog={};function dadb(){adb=1;};</script>
24 25<style> 26:root{--input-bg:#fff;--input-c:#212529;--input-b:#ced4da;--hdr-bg:#fff;--hdr-b:#b7b5b5;--thm-b:#ffffff;--thm-bs:#696969;--thm-bg:#fff;--soclink-c:#424242;--hr-bg:#BDBDBD;--menuh-bg:#f7f7f7;--menuh-c:#4c4c4c;--menuh-b:#d2d2d2;--menuh-h-bg:#0077c8;--menuh-h-b:#fff;--menuh-h-c:#fff;--body-c:#212529;--mnubxh-bg:#098f59;--mnubxh-c:#fff;--mnubx-bg:#fff;--mnubx-b:#098f59;--mnubx-bs:#c9c9c9;--mnubx-c:#000;--mnubx-bbc:#efefef;--mnubx-h-bg:#dbdbdb}body{margin:0;font-size:14px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";color:#212529;text-align:left;background-color:#e2e2e2}*,::after,::before{box-sizing:border-box}a{color:var(--a-c);text-decoration:none}.ul,.li,.ul li{list-style:none;margin:0;padding:0}header,main,footer,aside,article,section{display:block}h2,h1{margin:0}button{background:linear-gradient(to bottom,var(--btn-bga),var(--btn-bgb));border:solid 1px var(--btn-b);padding:5px 10px;border-radius:2px;font-size:14px;cursor:pointer;color:var(--btn-c)}button:hover{background:linear-gradient(to bottom,var(--btn-bgb),var(--btn-bga))}button.search_btn:hover{background:var(--btn-h-bg)}button:active{background:var(--btn-act-bg);outline:none}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased}.fa-search:before{content:"\f002";width:15px;height:15px}.fa-facebook-square:before{content:"\f082"}.fa-twitter-square:before{content:"\f081"}.fa-linkedin-square:before{content:"\f08c"}.fa-instagram:before{content:"\f16d"}.thm-hg{background-color:var(--thm-bg)}.thm-border{border:solid 1px var(--thm-b);box-shadow:0 5px 20px -10px var(--thm-bs)}header#header{background-color:var(--hdr-bg);border-bottom:1px solid var(--hdr-b);position:fixed;right:0;top:0;left:0;z-index:800}nav#nav{margin-top:66px}div#header_wrapper{padding:5px 10px;min-height:55px}div#hcg_m_menu{display:none}a#left_menu>span:nth-child(even){margin:6px 0}a#logo{display:inline-block;margin-left:5px}a#logo svg{width:60px;height:40px;vertical-align:middle;display:inline-block}a#search_icon{color:#6e6e6e;display:none;font-size:20px}a#search_icon i{vertical-align:middle;display:inline-block;min-width:20px;min-height:20px}input#search{width:170px;height:35px;border-radius:3px 0 0 3px}button.search_btn{background:none;border:1px solid var(--input-b);padding:0 0;cursor:pointer;border-radius:0 2px 2px 0;border-left:none!important;width:33px;outline:none}i.fa{text-align:center;display:inline-flex;align-items:center;justify-content:center;min-width:17px;min-height:15px}.menu-h{border-radius:5px;padding:5px;margin:10px 10px}.menu-h a{background-color:var(--menuh-bg);color:var(--menuh-c);text-align:left;padding:7px 10px;font-size:15px;display:inline-block;border-radius:3px;border:solid 1px var(--menuh-b)}.menu-h a:active,.menu-h a:focus{background-color:#b7b7b7;border:solid 1px #fff;color:#151414}.menu-h a:hover{background-color:var(--menuh-h-bg);border:solid 1px var(--menuh-h-b);color:var(--menuh-h-c)}div#main-body{margin:0 auto;max-width:2000px}.main-body-wrapper{margin:10px}.center-panel{flex:1 1 auto}div#content{width:100%;padding:10px;border-radius:3px;min-height:800px;text-align:left}.h-text{margin:20px 0;text-align:center;font-weight:400;font-size:20px}.p-text{font-size:15px;line-height:1.5;text-align:left}.chr-div-btn{border:none;width:100%;overflow:hidden;background-color:var(--hr-bg);height:1px;margin:30px 0}footer#footer{background-color:var(--hdr-bg);border-top:1px solid var(--hdr-b)}div#footer_wraper{min-height:135px}.ftr_menu{gap:6px}.ftr_menu a{display:inline-block;font-size:12px;margin:0 2px;color:var(--soclink-c)}span#copyright{font-size:12px;color:var(--soclink-c)}div#social-links>a{display:flex;justify-content:center;align-items:center;margin:5px;font-size:30px;color:var(--soclink-c)}.df{display:flex}.aic{align-items:center}.jcsb{justify-content:space-between}.fw{flex-wrap:wrap}.jcc{justify-content:center}ins{display:block;height:100%;width:100%}ul.ul_top{gap:8px 8px;margin:5px}.darkbox{margin:0 10px;margin-right:0}.darkbox .dark-ckb-label{position:relative;display:inline-block;width:25px;height:25px;cursor:pointer}.darkbox .dark-ckb-label:after{width:25px;height:25px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzZlNmU2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuMjkzIDEzLjI5M0E4IDggMCAwMTYuNzA3IDIuNzA3YTguMDAyIDguMDAyIDAgMTAxMC41ODYgMTAuNTg2eiI+PC9wYXRoPiA8L3N2Zz4=);background-repeat:no-repeat;background-position:center;display:block;content:''}.darkbox .dark-input{display:none}.darkbox .dark-input:checked~label:after{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAzUExURUdwTLu7u7u7u7q6uru7u7u7u7u7u7q6urq6ury8vLu7u7u7u7u7u7y8vLu7u7e3t7u7u6NF5VYAAAAQdFJOUwDgpWDA7yBQgN+PEM9/QEB5IXwMAAAAjUlEQVQY042QSxaDIAxFHyEJCqjZ/2oLSlraOvANCLknf8AVAv71A+MM42BG3aTUX7JBybInLVfA+VUcLMYRmqeymwk1vH21sloArXZMkEW7KcKXv65rgg2HBKmBNl5IkNGTDSn4FiylG/X0U7vVVrRUn9yHFiaxZUJZEbnhHfrG9InIvub9Qe5O9/DyLwB5A6GQL1RVAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center}.hdhri{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:2px}div#footer_wraper>div{padding:8px}form#search_form{display:flex;align-items:stretch}div#main-head,div#main-footer{margin:10px}.input-text{display:block;padding:0.375rem 0.35rem;font-size:14px;font-weight:400;line-height:1.5;color:var(--input-c);background-color:var(--input-bg);border:1px solid var(--input-b);border-radius:.25rem}.input-text:hover{border:1px solid #F0F}.input-text:focus{border:1px solid #4d90fe;box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);outline:none}.btmad{margin:10px 0;overflow:hidden;width:100%;padding:10px;border-radius:3px;min-height:200px}.adsm{padding:5px;overflow:hidden;min-height:200px}.ads-300{height:100%}.mngrp{margin:5px;flex:1 1 auto;border:solid 1px var(--mnubx-b);border-radius:5px;background-color:var(--mnubx-bg);width:300px;margin-bottom:10px;box-shadow:2px 2px 4px 0 var(--mnubx-bs)}.menugh{text-align:center;padding:12px 5px;text-transform:capitalize;color:var(--mnubxh-c);font-size:15px;background:linear-gradient(to right,var(--mnubxh-bg),var(--mnubxh-bg));border-radius:3px 3px 0 0;overflow:hidden}ul.mmnu{max-height:400px;overflow:auto}ul.mmnu li a{color:var(--mnubx-c);padding:12px 10px;display:block;font-size:14px;border-bottom:solid 1px var(--mnubx-bbc);text-transform:capitalize}ul.mmnu li a:hover{background-color:var(--mnubx-h-bg)}ul.mmnu li a:last-child{border-bottom:0}@media screen and (max-width:600px){.mngrp{margin:0;margin-bottom:30px}}html.dark-mode{--input-bg:#1a2221;--input-c:#a2a2a2;--input-b:#585858;--bkbg-bs:#1c2123;--bkbg-bg:#2e3638;--bkbg-b:#3e494c;--hdr-bg:#171a1c;--hdr-b:#3e3e3e;--thm-b:#2a3234;--thm-bs:#000000;--thm-bg:#202628;--soclink-c:#aaa;--hr-bg:#444;--menuh-bg:#333738;--menuh-c:#a1a1a1;--menuh-b:#3e3e3e;--menuh-h-bg:#02558e;--menuh-h-b:#02558e;--menuh-h-c:#c7c7c7;--body-c:#b2b2b2;--mnubxh-bg:#373c3e;--mnubxh-c:#b6b6b6;--mnubx-bg:#2e3638;
26--mnubx-b:#3e494c;--mnubx-bbc:#3f4b4e;--mnubx-bs:#1c2123;--mnubx-c:#a2a2a2;--mnubx-h-bg:#1d2224}html.dark-mode ins{opacity:0.8}html.dark-mode ins:hover{opacity:1}html.dark-mode,html.dark-mode body{background-color:#171a1c;color-scheme:dark;color:#b2b2b2}@media (max-width:500px){div#search_box{display:none;position:absolute;right:90px;top:0;left:1px;height:100%}.search_form{display:flex;height:100%}form#search_form{display:flex;align-items:stretch;flex:1}input#search{width:100%;height:100%;border-radius:0;border:none;padding-left:10px;border-bottom:solid 2px #0097b3}button.search_btn{background:#efefef;border:none!important;display:inline-block;border-radius:0;width:40px;text-align:center;flex:1 1 auto;color:#a1a1a1;font-size:16px;height:100%;margin-left:-1px}a#search_icon{display:flex}.p-text{font-size:14px}.h-text{font-size:18px}button.search_btn{display:none}}</style>
27<script>window.adsbygoogle = [{},{}];</script>
27 28<style>@font-face{font-family:'FontAwesome';src:url('/style/fonts/fa/2.woff2') format('woff2'),url('/style/fonts/fa/2.woff') format('woff');font-weight:normal;font-style:normal;font-display:fallback}</style> 29</head> 30<body> 31<header id="header"> 32 <div id="header_wrapper" class="df jcsb aic"><div id="header_left" class="df jcfs aic"><div id="hcg_m_menu"><a href="#" title="menu" id="left_menu"><span></span><span></span><span></span></a></div><a href="/" id="logo" aria-label="logo" title="home"><svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.1918 19.8379L60 34.7427H35.1766L14.2464 25.86V13.7791L35.1766 5H60L24.1918 19.8379Z" fill="#098F59"/><path d="M35.1966 19.9048L0 34.7427H23.7306L45.7536 26.1273V14.4074L24.6363 5H0L35.1966 19.9048Z" fill="#0CC070"/></svg></a></div><div id="header_right" class="df jcsb aic"><div id="search_box"><search class="search_form"><form method="get" action="/search" id="search_form"><input type="text" name="q" class="input-text" placeholder="Search" id="search" aria-label="search"><button type="submit" class="search_btn df aic jcc" aria-label="search"><svg aria-hidden="true" fill="currentcolor" width="15" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z"></path></svg></button></form></search></div><a href="#" id="search_icon" aria-label="search" class="srchli hdhri"><svg aria-hidden="true" fill="currentcolor" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z"></path></svg></a><div class="darkbox hdhri"><input type="checkbox" id="hcg_dark" class="dark-input"><label for="hcg_dark" class="dark-ckb-label" title="dark light theme"></label></div></div></div></header> 33<nav id="nav" class="menu-h thm-border thm-hg df jcsb aic" aria-label="Main"> 34 <ul class="ul ul_top df aic fw"> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/javascript/">JavaScript</a></li> <li><a href="/jquery/">jQuery</a></li> <li><a href="/php/">PHP</a></li> <li><a href="/bootstrap/">Bootstrap</a></li> <li><a href="/mysql/">MySQL</a></li> <li><a href="/image/">Image</a></li> <li><a href="/svg/">SVG</a></li> <li><a href="/converter/">Converter</a></li> <li><a href="/tools/">Tools</a></li><li><a href="/htaccess/">htaccess</a></li></ul></nav> 35<main id="main"> 36 <div id="main-head"></div> 37 <div id="main-body"> 38 <div class="main-body-wrapper" id="hcg_middle_wraper"> 39 <div id="content" role="article" class="thm-border thm-hg"> 40 <h1 class="h-text">CSS Code Generator Button, Speech Bubble, Loading Animation</h1> 41<hr class="chr-div-btn"> 42<div class="menbx df fw"> 43 <div class="mngrp bkbg"> 44 <h2 class="menugh">CSS Generator</h2> 45 <ul class="mmnu ul scrlbx"> 46 <li><a href="/css/checkerboard-transparency-pattern">CSS Checkerboard Transparency Pattern</a></li> 47 <li><a href="/css/3d-cube-rotation">3D Cube Rotation Generator</a></li> 48 <li><a href="/css/button-generator">Button Generator With Icon</a></li> 49 <li><a href="/css/speech-bubble-generator">Speech Bubble Generator</a></li> 50 <li><a href="/css/triangle-generator">Triangle Generator</a></li> 51 <li><a href="/css/3d-text-generator">3D Text Generator</a></li> 52 <li><a href="/css/filter-effects-generator">Image Filter Effects</a></li> 53 <li><a href="/css/text-stroke-generator">Text Stroke Generator</a></li> 54 <li><a href="/css/text-inside-image">Text Masking Image</a></li> 55 <li><a href="/css/text-shadow-generator">Text Shadow Generator</a></li> 56 <li><a href="/css/box-shadow-generator">Box Shadow Generator</a></li> 57 <li><a href="/css/transform-generator">Transform Generator</a></li> 58 <li><a href="/css/border-radius-generator">Border Radius Generator</a></li> 59 <li><a href="/css/opacity-generator">Opacity</a></li> 60 <li><a href="/css/rgba-color-generator">RGBA Color Generator</a></li> 61 <li><a href="/css/multi-column-generator">paragraph Columns Layout</a></li> 62 <li><a href="/css/font-style-generator">Font Style Generator</a></li> 63 <li><a href="/css/loading-animation-generator">Loading animation circle</a></li> 64 <li><a href="/css/animation-generator">Animation code generator</a></li> 65 <li><a href="/css/rotate-generator">Rotate Animation</a></li> 66 <li><a href="/css/gradient-color-generator">Gradient Color Generator</a></li> 67 <li><a href="/css/image-zoom-effect-animation">Image Zoom Effect Animation</a></li> 68 <li><a href="/css/reflect-generator">Reflections Generator</a></li> 69 </ul> 70 </div> 71 <div class="mngrp bkbg"> 72 <h2 class="menugh">CSS Snippets</h2> 73 <ul class="mmnu ul scrlbx"> 74 <li><a href="/css/pagination">Pagination</a></li> 75 <li><a href="/css/mouse-cursor-styles">Mouse Cursor Style</a></li> 76 <li><a href="/css/textbox-style">Textbox Styles</a></li> 77 <li><a href="/css/radio-button-checkbox-style">Radio Button Checkbox</a></li> 78 </ul> 79 </div> 80 <div class="mngrp bkbg"> 81 <h2 class="menugh">CSS Tools</h2> 82 <ul class="mmnu ul scrlbx"> 83 <li><a href="/tools/css-format">CSS De-compressor Unminify</a></li> 84 <li><a href="/tools/css-compress">CSS Compressor Minifier</a></li> 85 </ul> 86 </div> 87 88 <div class="mngrp bkbg"> 89 <h2 class="menugh">CSS Animation</h2> 90 <ul class="mmnu ul scrlbx"> 91 <li><a href="/css/3d-cube-rotation">3D Cube Rotation Animation</a></li> 92 <li><a href="/css/card-hover-flip-animation">CSS Flip 3D Animation</a></li> 93 <li><a href="/css/loading-animation">CSS Loaders</a></li> 94 <li><a href="/css/animation-generator">CSS Animations</a></li> 95 <li><a href="/css/rotate-generator">CSS Rotation Animation</a></li> 96 97 <li><a href="/css/animations/fade">Fade Animation</a></li> 98 <li><a href="/css/animations/blink">Blink Animation</a></li> 99 <li><a href="/css/animations/slide">Slide Animation</a></li> 100 <li><a href="/css/animations/zoom">Zoom Animation</a></li> 101 <li><a href="/css/animations/bounce-elastic">Bounce and Elastic Animations</a></li> 102 </ul> 103 </div> 104 <div class="mngrp bkbg aic adsm"></div> 105</div> 106 </div> 107 <div id="s_cnt" class="thm-border thm-hg btmad"> 108 <div id="ads-footer"><ins class="adsbygoogle" style="text-align: center;display:block" data-ad-client="ca-pub-6524121743337804" data-ad-slot="7487832269" data-ad-format="auto" data-full-width-responsive="true"></ins></div> </div> 109 </div> 110 </div> 111 <div id="main-footer"></div> 112</main> 113<footer id="footer"> 114 <div id="footer_wraper" class="df jcsb aic fw" role="contentinfo"> <div class="flbx"> </div> <div class="fcbx"> <div class="ftr_menu df aic fw jcc"> <a href="/contact.php">Contact</a> | <a href="/terms-of-use.php">Terms of Use</a> | <a href="/privacy-policy.php">Privacy Policy</a> </div> <div class="ftr_cprt"> <span id="copyright">Copyright © 2026 www.html-code-generator.com </span> </div> </div> <div class="frbx"> <div id="social-links" class="df jcc aic fw"> <a id="facebook-link" href="https://www.facebook.com/HTMLCodeGenerator" target="_blank" title="facebook page" rel="noopener"><i class="fa fa-facebook-square"></i></a> <a id="twitter-link" href="https://twitter.com/HTMLgenerator" target="_blank" title="twitter page" rel="noopener"><i class="fa fa-twitter-square"></i></a> <a id="linkedin-link" href="https://www.linkedin.com/company/htmlcodegenerator" target="_blank" title="linkedin page" rel="noopener"><i class="fa fa-linkedin-square"></i></a> <a id="instagram-link" href="https://www.instagram.com/htmlcodegenerator" target="_blank" title="instagram page" rel="noopener"><i class="fa fa-instagram"></i></a> </div> </div></div> 115</footer>
116<script> 117(d=>{const c=(a,b,e)=>{a.addEventListener(b,e,!1)};c(document.getElementById("hcg_dark"),"change",a=>{hcgdark=a=a.target.checked;document.documentElement.className=a?"dark-mode":"light";var b=new Date;b.setTime(b.getTime()+2592E6);b="expires="+b.toUTCString();document.cookie="dark-mode="+(a?"dark":"light")+";"+b+";path=/; domain=.html-code-generator.com;SameSite=Lax";window.hcgDark&&window.hcgDark(a)});c(document.getElementById("search_icon"),"click",a=>{a.preventDefault();a=document.getElementById("search_box"); 118"none"==d.getComputedStyle(a).display?a.style.display="block":a.style.display="none";"block"==a.style.display&&document.getElementById("search").focus()})})(window); 119</script>
119 120</body> 121</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.