How to Create a Simple Cookie Consent Banner with CSS & JS

Create a simple cookie consent banner with CSS & JavaScript. Lightweight, responsive, and easy tutorial for Blogger & HTML websites.

How to Create a Simple Cookie Consent Banner with CSS & JS

Adding cookie consent to your website is one of the important steps to gain trust from users and comply with privacy regulations. If you are running a blog, portfolio, downloading or a business website, cookie consent is must have element in your website to ensure better transparency between your website and its users. With a simple, responsive and modern design, it doesn't make your website interface messy or ugly. It improves users' trust by telling users for what purpose or why your website uses cookies. In this tutorial, you will understand how to add a simple, responsive, modern cookie consent banner to your website just using pure CSS and JavaScript. This tutorial was also beginner-friendly, so it was easy to follow for anyone who just has basic knowledge about their website platform. This cookie consent banner does not show again and again to users; instead, it works like once a user agreed the the cookies banner message, it doesn't show in there next visit until the…

Post a Comment

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/344097953-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'APlU3lyVzhCLvzikprSrWPB4J2Mf:1775368003928';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8845858942267856111','//www.coshix.in/2026/04/create-cookie-consent-banner-css-js.html?amp\x3d1','8845858942267856111');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8845858942267856111', 'title': 'Coshix', 'url': 'https://www.coshix.in/2026/04/create-cookie-consent-banner-css-js.html?amp\x3d1', 'canonicalUrl': 'https://www.coshix.in/2026/04/create-cookie-consent-banner-css-js.html', 'homepageUrl': 'https://www.coshix.in/?amp\x3d1', 'searchUrl': 'https://www.coshix.in/search', 'canonicalHomepageUrl': 'https://www.coshix.in/', 'blogspotFaviconUrl': 'https://www.coshix.in/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coshix - Atom\x22 href\x3d\x22https://www.coshix.in/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Coshix - RSS\x22 href\x3d\x22https://www.coshix.in/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coshix - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8845858942267856111/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coshix - Atom\x22 href\x3d\x22https://www.coshix.in/feeds/2723527117873341462/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/16d2a080d6cf52d7', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2723527117873341462', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vR4wAGWC6E9y1PDcY3U4kfhOcOOi27mzc01srUhpZbkMPc9OUt0-ZzU6UD2Ou1FFo2NY7wZ9V4ZBdD5LZ8HbAq4qX16iqOCFSpBJvZzKUHHYNTreeVoc8S_x58tIdDYJCORbvZ449FGprUZleoir87PVuQO7c026WwvVX7s3VNbKmqN2RSMoEy6E8QmP/s72-c-rw/simple-cookie-consent%20%281%29.webp', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vR4wAGWC6E9y1PDcY3U4kfhOcOOi27mzc01srUhpZbkMPc9OUt0-ZzU6UD2Ou1FFo2NY7wZ9V4ZBdD5LZ8HbAq4qX16iqOCFSpBJvZzKUHHYNTreeVoc8S_x58tIdDYJCORbvZ449FGprUZleoir87PVuQO7c026WwvVX7s3VNbKmqN2RSMoEy6E8QmP/s1600-rw/simple-cookie-consent%20%281%29.webp', 'pageName': 'How to Create a Simple Cookie Consent Banner with CSS \x26 JS', 'pageTitle': 'Coshix: How to Create a Simple Cookie Consent Banner with CSS \x26 JS', 'metaDescription': 'Create a simple cookie consent banner with CSS \x26 JavaScript. Lightweight, responsive, and easy tutorial for Blogger \x26 HTML websites.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to Create a Simple Cookie Consent Banner with CSS \x26 JS', 'description': 'Create a simple cookie consent banner with CSS \x26 JavaScript. Lightweight, responsive, and easy tutorial for Blogger \x26 HTML websites.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vR4wAGWC6E9y1PDcY3U4kfhOcOOi27mzc01srUhpZbkMPc9OUt0-ZzU6UD2Ou1FFo2NY7wZ9V4ZBdD5LZ8HbAq4qX16iqOCFSpBJvZzKUHHYNTreeVoc8S_x58tIdDYJCORbvZ449FGprUZleoir87PVuQO7c026WwvVX7s3VNbKmqN2RSMoEy6E8QmP/s1600-rw/simple-cookie-consent%20%281%29.webp', 'url': 'https://www.coshix.in/2026/04/create-cookie-consent-banner-css-js.html?amp\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2723527117873341462}}, {'name': 'widgets', 'data': [{'title': 'Coshix (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Find it here...', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Bookmark Posts', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Translate', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Social Links', 'type': 'LinkList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'LinkList04'}, {'title': 'Tabbed Menu', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList05'}, {'title': 'Labels Description', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList07'}, {'title': 'Featured', 'type': 'FeaturedPost', 'sectionId': 'sec_Top_Widgets', 'id': 'FeaturedPost01', 'postId': '6859771077293233542'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '2723527117873341462', 'title': 'How to Create a Simple Cookie Consent Banner with CSS \x26 JS', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vR4wAGWC6E9y1PDcY3U4kfhOcOOi27mzc01srUhpZbkMPc9OUt0-ZzU6UD2Ou1FFo2NY7wZ9V4ZBdD5LZ8HbAq4qX16iqOCFSpBJvZzKUHHYNTreeVoc8S_x58tIdDYJCORbvZ449FGprUZleoir87PVuQO7c026WwvVX7s3VNbKmqN2RSMoEy6E8QmP/s1600-rw/simple-cookie-consent%20%281%29.webp', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Categorized Posts', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList08'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Trending Now', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'How to Add Login and Signup in Blogger Using Firebase', 'id': 6859771077293233542}, {'title': 'How to Add News Ticker Widget in Blogger (Pure JS)', 'id': 659696520542570009}, {'title': 'Fix Blogger ?m\x3d1 Issue + Redirect Errors in Google Search Console', 'id': 6452544243943604727}, {'title': 'How to Add Table of Contents in Blogger (Automatic TOC Guide)', 'id': 2807705889483978531}, {'title': '5G Speed Slow on Your Phone? 7 Fixes That Work', 'id': 6021102320250072590}, {'title': 'How to Add Like and Dislike Button in Blogger Using Firebase', 'id': 631169054319704608}, {'title': 'How to Create a Quiz System in JavaScript with Timer, Explanation \x26 Score (Step-by-Step Tutorial)', 'id': 2597091393542206363}, {'title': 'Android Phone Overheating? Causes and Fixes', 'id': 4656627364499877083}]}, {'title': 'Tags', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': 'Social Media Links', 'type': 'LinkList', 'sectionId': 'sec_Footer_Organization', 'id': 'LinkList21'}, {'title': 'Quick Links', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList22'}, {'title': 'Categories', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList23'}, {'title': 'Explore', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList24'}, {'title': 'Legal', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Firebase Configurations', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList61'}, {'title': 'Progressive Web App', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList62'}, {'title': 'Cookie Consent [NoTitle]', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': '/p/privacy-policy.html', 'title': 'Privacy'}, {'isCurrentPage': false, 'href': '/p/disclaimer.html', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '/p/terms-of-service.html', 'title': 'Terms'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList04', 'sec_Nav_Widgets_2', document.getElementById('LinkList04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList05', 'sec_Under_Header', document.getElementById('LinkList05'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList07', 'sec_Under_Header', document.getElementById('LinkList07'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost01', 'sec_Top_Widgets', document.getElementById('FeaturedPost01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2626028960-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList08', 'sec_Main_Widgets', document.getElementById('LinkList08'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList21', 'sec_Footer_Organization', document.getElementById('LinkList21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList24', 'sec_Footer_Widgets', document.getElementById('LinkList24'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '8845858942267856111', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'APlU3lzErt_235i5uXHxRqykvsT5:1775368003929', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.coshix.in/b/stats?amp\x3d1\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmCOPeue1zIQKOcXCrOUkjNBI7SQGYusO2t8bLanDCkajQMWtTqnTZegkgvvkyy_ecy6hIzMYO1UHHnk1On44a5xzR2vTw'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList61', 'sec_Addon_Widgets', document.getElementById('LinkList61'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList62', 'sec_Addon_Widgets', document.getElementById('LinkList62'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>