Instagram Logo CSS gradient with HTML best 2 quality logo

- Advertisement -

The new Instagram logo create by CSS gradient. Read more about Gradient here

Instagram logo CSS and HTML

Method – 1

instagram logo css vector
instagram logo css vector

- Advertisement -

logo.html

- Advertisement -

[html]
<link rel="stylesheet" href="//maxcdn.bootstrapcdn. com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="instagram">
<span class="fa fa-instagram"></span>
</span>
[/html]

style.css

[css]

.instagram {
display: inline-block;
width: 250px;
height: 250px;
text-align: center;
border-radius: 40px;
color: #fff;
font-size: 220px;
line-height: 250px;
vertical-align: middle;
background: #d6249f;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
box-shadow: 0px 3px 10px rgba(0,0,0,.25);
}

[/css]

 

Instagram logo CSS Gradient
Instagram logo CSS Gradient

Method – 2

 

logo.html

[html]

<link href="https://cdnjs.cloudflare. com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<i class="fa fa-instagram" id="insta" aria-hidden="true"></i>
[/html]

style.css

[css]
#insta {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-webkit-background-clip: text;
/* Also define standard property for compatibility */
background-clip: text;
-webkit-text-fill-color: transparent;

font-size: 200px; /* change this to change the size*/

}

[/css]

for Old Instagram by CSS style: 

old-instagram-logo-css
old-instagram-logo-css

Search terms

  • instagram background color code,
  • instagram gradient css font awesome,
  • instagram logo codepen,
  • instagram color gradient hex,
  • instagram gradient color code css,
  • instagram favicon,
  • font awesome instagram color,
  • instagram white background color code,
- Advertisement -

Share it with friends:

Related Articles

How to create best Bootstrap FAQ template? [Full Source Code]

Bootstrap FAQ Bootsrap Frequently Asked Questions. bootstrap faq, bootstrap faq template, bootstrap 4 faq template, bootstrap 3 faq template, bootstrap compost faq, faq in...

Old Instagram Logo with HTML and CSS quality logo

Create the Old Instagram Logo by HTML and CSS. Old Instagram Logo CSS  for new style Instagram logo  logo.html <div class="Instagram"> <span class="Instagram-strip"></span> <span class="Instagram-viewfinder"></span> ...

Chrome plans to start blocking resource-heavy ads in August Update

Chrome plans to start blocking resource-heavy ads that drain a lot of battery in August, Google announced today on its Chromium blog (via VentureBeat). Chrome...

How to create Sitemaps on Blogger for Google and Bing

Create Sitemaps on Blogger The XML Sitemap file is like a directory of all web pages that exist on your website or blog. Google,...

How to speed up WordPress with Plesk and WP Super Cache, WP Rocket, Autoptimize Free

https://websavers.ca/how-to-speed-up-wordpress   This guide includes 9 tips to show you how to take just about any WordPress site to a maximum 1-2 seconds load time. If you’ve...

What is “8203​” HTML character? Why is being injected into my HTML?

This “8203;” HTML character is intended for line break control; it has no width, but its presence between two characters does not prevent increased...

Get in Touch

165FansLike
113FollowersFollow

Latest Posts

How to create best Bootstrap FAQ template? [Full Source Code]

Bootstrap FAQ Bootsrap Frequently Asked Questions. bootstrap faq, bootstrap faq template, bootstrap 4 faq template, bootstrap 3 faq template, bootstrap compost faq, faq in...

Old Instagram Logo with HTML and CSS quality logo

Create the Old Instagram Logo by HTML and CSS. Old Instagram Logo CSS  for new style Instagram logo  logo.html <div class="Instagram"> <span class="Instagram-strip"></span> <span class="Instagram-viewfinder"></span> ...

Chrome plans to start blocking resource-heavy ads in August Update

Chrome plans to start blocking resource-heavy ads that drain a lot of battery in August, Google announced today on its Chromium blog (via VentureBeat). Chrome...

How to create Sitemaps on Blogger for Google and Bing

Create Sitemaps on Blogger The XML Sitemap file is like a directory of all web pages that exist on your website or blog. Google,...

How to speed up WordPress with Plesk and WP Super Cache, WP Rocket, Autoptimize Free

https://websavers.ca/how-to-speed-up-wordpress   This guide includes 9 tips to show you how to take just about any WordPress site to a maximum 1-2 seconds load time. If you’ve...

Popular Posts

This is the proposed SpaceX internet plan. WOW

Sometime in 2019, SpaceX will be launching the first of its proposed 4000 satellites to provide ultra-high speed internet to the entire world. This is...

Failed to execute ‘postMessage’ on ‘DOMWindow’: https://www.accounts.google.com !== http://yourdoamin.com

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://accounts.google.com') does not match the recipient window's origin ('https://www.yourdomain.com') What is the problem actually? How to...

Instagram Logo CSS gradient with HTML best 2 quality logo

The new Instagram logo create by CSS gradient. Read more about Gradient here Instagram logo CSS and HTML Method - 1 logo.html &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn. com/font-awesome/4.3.0/css/font-awesome.min.css"&gt; &lt;span class="instagram"&gt; ...

DB import failure at CREATE ALGORITHM = UNDEFINED DEFINER Error: #1227 – Access denied – Fixed

CREATE ALGORITHM=UNDEFINED DEFINER=root@`%` SQL SECURITY INVOKER VIEW...  When import the SQL file from localhost to remote server, if the server is shared or not given...

XAMPP Port 443 ERROR in Windows with VMware

When we used XAMPP and VM Ware or any Virtual machine on the same PC we can't run XAMPP or WAMP properly because Virtual machine...